adminLTE to vuejs v2.x converting project

Downloads in past


0.4.35 years ago5 years agoMinified + gzip package size for vue2-admin-lte in KB


vue2-admin-lte (Demo)
AdminLTE of Admin control panel template Based on Vuejs 2.x Front-end Framework.


Demo Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests: coming soon
# npm run unit

# run e2e tests: coming soon
# npm run e2e

# run all tests: comping soon
# npm test

How to use

First, npm install
$ npm i --save vue2-admin-lte

append alias config in webpack
module.exports = {
  resolve: {
    alias: {
      'va': 'vue2-admin-lte/src'

import css and javascript files
// css files
import 'va/lib/css'

// js files
import 'va/lib/script'

use the components in .vue

import VAButton from 'va/components/VAButton.vue'
export default {
  name: 'Button',
  components: {
    'va-button': VAButton



    title="Direct Chat"
    placeholder="Type Messages ..."


import VADirectChat from '../path/to/components/VADirectChat.vue'

export default {
  name: 'App',
  data () {
    return {
      talkList: [
          name: 'Alexander Pierce',
          date: new Date(),
          profileImage: 'http://path/to/image',
          message: `Is this template really for free? That's unbelievable`,
          isMine: false
          name: 'Sarah Bullock',
          date: new Date(),
          profileImage: 'http://path/to/image',
          message: `You better believe it!`,
          isMine: true
  components: {
    'va-direct-chat': VADirectChat


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'


export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production'

Contributing to Vue2 AdminLTE

The following is a set of guidelines for contributing to Vue2 AdminLTE.

Submitting Issues

You can create an issue here.
If you can, please include:
  • The version, name of Browser you are using
  • The operating system you are using

Other things that will help resolve your issue:
  • Screenshots or gif
  • dev tools or an alert
  • Perform a search to see if a similar issue has already been submitted

Submitting Pull Requests

  • Include screenshots and animated gif in your pull request whenever possible.
  • Use short, present tense commit messages.