Color Admin

Follow the following step to install the vue cli in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide

<!-- copy the following folder-->
/admin/template/assets/css
/admin/template/assets/img

<!-- paste it into react folder -->
/admin/template/template_vue/src/assets/css
/admin/template/template_vue/public/assets/img

<!-- run the following command -->
cd /your-path-url/template_vue
npm install 
npm run serve

<!-- browse the url -->
http://localhost:8081/

cd /your-path-url/template_vuejs
npm install 
npm run serve

Verify that you are running at least node 10.9.x or later and npm 6.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

File structure overview for Vue JS Version

template_vue/
├── package.json
├── babel.conf.js
├── public/
└── src/
    ├── App.vue
    ├── main.js
    ├── assets/
    ├── components/
    ├── config/
    ├── pages/
    ├── plugins/
    └── scss/

Below is the code from App.vue which include the header, sidebar, right sidebar, top menu, page content and footer. You may remove the component if you are not using it.

<template>
  <div class="fade page-sidebar-fixed page-header-fixed show page-container" v-if="!pageOptions.pageEmpty" v-bind:class="{ 
    'page-sidebar-minified': pageOptions.pageSidebarMinified, 
    'page-content-full-height': pageOptions.pageContentFullHeight, 
    'page-without-sidebar': pageOptions.pageWithoutSidebar, 
    'page-with-right-sidebar': pageOptions.pageWithRightSidebar, 
    'page-with-two-sidebar': pageOptions.pageWithTwoSidebar,
    'page-with-wide-sidebar': pageOptions.pageWithWideSidebar,
    'page-with-light-sidebar': pageOptions.pageWithLightSidebar,
    'page-with-top-menu': pageOptions.pageWithTopMenu,
    'page-sidebar-toggled': pageOptions.pageMobileSidebarToggled,
    'page-right-sidebar-toggled': pageOptions.pageMobileRightSidebarToggled || pageOptions.pageRightSidebarToggled,
    'page-right-sidebar-collapsed': pageOptions.pageRightSidebarCollapsed,
    'has-scroll': pageOptions.pageBodyScrollTop
  }">
    <Header />
    <TopMenu v-if="pageOptions.pageWithTopMenu" />
    <Sidebar v-if="!pageOptions.pageWithoutSidebar" />
    <SidebarRight v-if="pageOptions.pageWithTwoSidebar" />
    <div id="content" class="content" v-bind:class="{ 'content-full-width': pageOptions.pageContentFullWidth, 'content-inverse-mode': pageOptions.pageContentInverseMode }">
      <router-view></router-view>
      <vue-ins-progress-bar></vue-ins-progress-bar>
    </div>
    <Footer v-if="pageOptions.pageWithFooter" />
  </div>
  <div v-else>
    <router-view></router-view>
    <vue-ins-progress-bar></vue-ins-progress-bar>
  </div>
</template>

List of components inside the components folder

components/
├── footer/
├── header
├── sidebar/
├── sidebar-right/
├── top-menu/
└── vue-chartjs/

File to configure the default page options & page routes

config/
├── PageOptions.vue
└── PageRoutes.vue

Example of how to change page options in single page

<script>
import PageOptions from '../config/PageOptions.vue'

export default {
  created() {
    PageOptions.pageWithTopMenu = true;
    PageOptions.pageWithoutSidebar = true;
  },
  beforeRouteLeave (to, from, next) {
    // change back to default
    PageOptions.pageWithTopMenu = false;
    PageOptions.pageWithoutSidebar = false;
    next();
  }
}
</script>

List of options:

<script>
const pageOptions = {
  pageSidebarMinified: false,
  pageContentFullWidth: false,
  pageContentInverseMode: false,
  pageContentFullHeight: false,
  pageWithLanguageBar: false,
  pageWithFooter: false,
  pageWithoutSidebar: false,
  pageWithRightSidebar: false,
  pageWithTwoSidebar: false,
  pageWithWideSidebar: false,
  pageWithLightSidebar: false,
  pageWithMegaMenu: false,
  pageWithTopMenu: false,
  pageSidebarTransparent: false,
  pageEmpty: false,
  pageMobileSidebarToggled: false,
  pageMobileRightSidebarToggled: false,
  pageMobileTopMenu: false,
  pageMobileMegaMenu: false,
  pageRightSidebarToggled: false,
  pageBodyScrollTop: 0
}

export default pageOptions;
</script>

You may include the color admin theme scss file from /admin/src/scss/default/ as well.

<!-- copy the following folder -->
/admin/src/scss/default/

<!-- paste & replace the file inside the following folder -->
/admin/template/template_vue/src/scss/

change the following code in /template_vue/src/main.js

<!-- from LINE 46 -->
import './assets/css/default/app.min.css'
import './scss/vue.scss'
import 'bootstrap-social/bootstrap-social.css'

<!-- to -->
import './scss/styles.scss'
import 'bootstrap-social/bootstrap-social.css'

add the following code to /template_vue/src/scss/styles.scss

@import 'vue';

after you done all the steps before this, you may run the following command to start your vue project.

npm run serve

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/bootstrap-vue

{
  "name": "color-admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@agametov/vueditor": "^0.4.1",
    "@chenfengyuan/vue-countdown": "^1.1.2",
    "apexcharts": "^3.8.3",
    "bootstrap": "^4.3.1",
    "bootstrap-social": "^5.1.1",
    "bootstrap-vue": "^2.0.0-rc.27",
    "chart.js": "^2.8.0",
    "flag-icon-css": "^3.3.0",
    "ionicons": "^4.6.2",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "simple-line-icons": "^2.4.1",
    "v-autocomplete": "^1.8.2",
    "vue": "^2.6.10",
    "vue-apexcharts": "^1.4.0",
    "vue-bootstrap-datetimepicker": "^5.0.1",
    "vue-chartjs": "^3.4.2",
    "vue-custom-scrollbar": "^1.1.0",
    "vue-event-calendar": "^1.5.2",
    "vue-full-calendar": "^2.7.0",
    "vue-good-table": "^2.17.4",
    "vue-hljs": "^1.1.2",
    "vue-input-tag": "^2.0.6",
    "vue-ins-progress-bar": "^1.0.0",
    "vue-maskedinput": "^0.1.3",
    "vue-notification": "^1.3.16",
    "vue-nvd3": "^1.0.0",
    "vue-pop-colorpicker": "^1.0.2",
    "vue-router": "^3.0.7",
    "vue-select": "^3.1.0",
    "vue-slider-component": "^3.0.33",
    "vue-sparklines": "^0.1.9",
    "vue-sweetalert2": "^2.1.1",
    "vue2-google-maps": "^0.10.7",
    "vuejs-datepicker": "^1.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.2",
    "@vue/cli-plugin-eslint": "^3.9.2",
    "@vue/cli-service": "^3.9.3",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}