The AdminLTE panel converted in Vue components

vue2-admin-lte

Admin panels are common but free and complete admin panels not so much. If you are looking for a free solution for admin panels be sure to check the AdminLTE Control Panel Template. Best open source admin dashboard & control panel theme. Built on top of Bootstrap 3, AdminLTE provides a range of responsive, reusable, and commonly used components.

In fact Vue.js Feed is built on top of the Vuedo project which utilizes a big portion of the original AdminLTE template for the dashboard!

Now there is an ongoing project which has as its purpose to convert most of the AdminLTE to Vue.js components as a new version for better results and more features. The vue2-admin-lte based on Vue.js, can used as whole (still in development) or be used as a suplament of UI elements for example.

Live Demo Here

To demonstrate a simple use of Vue-admin-lte features here is a simle example, using some of the provided elements.

Example

First, install:

yarn add vue2-admin-lte

Then append an alias config in webpack:

'va': 'vue2-admin-lte/src'

import css and javascript files:

// css files
import 'va/lib/css'

// js files
import 'va/lib/script

Then you can use the components you want in your *.vue files:

//importing what need
import VACalendar from 'va/widgets/VACalendar.vue'
import VAQuickMail from 'va/widgets/VAQuickMail.vue'
import VASmallBox from 'va/widgets/VASmallBox.vue'
import VAChatBox from 'va/widgets/VAChatBox.vue'

export default {
  name: 'dashboard',
  data () {
    return {
    }
  },
  components: {
    'va-calendar': VACalendar,
    'va-quick-mail': VAQuickMail,
    'va-small-box': VASmallBox,
    'va-chat-box': VAChatBox,
  }
}

<template>
  <div class="dashboard">
    <row>
      div class="col-lg-6 col-xs-6">
              <va-calendar>
              </va-calendar>
            </div>
            <div class="col-lg-6 col-xs-6">
              <va-quick-mail>
              </va-quick-mail>
            </div>
                        //4 of these
            <div class="col-lg-3 col-xs-6">
                <va-small-box
                color="aqua"
                icon="ion-bag"
                title="150"
                description="New Order"
                moreText="More info">
              </va-small-box>
            </div>
    <div class="col-lg-12 col-xs-12">
      <va-chat-box>
      </va-chat-box>
    </div>
    </row>
  </div>
</template>

Result

The vue2-admin-lte is available as an NPM package and on a GitHub repository where you will find usage instructions including:

• How to start mock server

node ./mock-server/index.js

• How to use Vuex

// /vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'

import * as actions from './actions'
import * as getters from './getters'
import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  actions,
  getters,
  modules,
  strict: process.env.NODE_ENV !== 'production'
})

• Contribution guide to Vue2 AdminLTE (consider doing so, to help complete another useful Vue.js project).

AdminLTE of Admin control panel template Based on Vuejs 2.x Front-end Framework.