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

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

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

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.

---

Copy over the required image from global assets folder

<!-- copy the following folder-->
/admin/template/assets/img
 
<!-- paste it into vuejs folder -->
/admin/template/template_vuejs/public/assets/img

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,
  pageSidebarSearch: false,
  pageBodyScrollTop: 0
}

export default pageOptions;
</script>

Now Vue.js version is fully scss configured. You may switch the Color Admin theme by changing the file /admin/src/scss/angular.scss.

@import 'default/styles';
 
<!-- other themes -->
@import 'apple/styles';
@import 'facebook/styles';
@import 'google/styles';
@import 'material/styles';
@import 'transparent/styles';

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.0.0",
  "description": "",
  "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.5",
    "apexcharts": "^3.22.0",
    "bootstrap": "^4.5.3",
    "bootstrap-social": "^5.1.1",
    "bootstrap-vue": "^2.18.1",
    "chart.js": "^2.9.4",
    "core-js": "^3.6.5",
    "flag-icon-css": "^3.5.0",
    "ionicons": "^4.2.6",
    "moment": "^2.29.1",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.4",
    "simple-line-icons": "^2.5.5",
    "v-autocomplete": "^1.8.2",
    "vue": "^2.6.12",
    "vue-apexcharts": "^1.6.0",
    "vue-bootstrap-datetimepicker": "^5.0.1",
    "vue-chartjs": "^3.5.1",
    "vue-custom-scrollbar": "^1.4.0",
    "vue-event-calendar": "^1.5.2",
    "vue-full-calendar": "^2.8.0",
    "vue-good-table": "^2.21.1",
    "vue-hljs": "^1.1.2",
    "vue-input-tag": "^2.0.7",
    "vue-ins-progress-bar": "^1.3.8",
    "vue-maskedinput": "^0.1.3",
    "vue-notification": "^1.3.20",
    "vue-nvd3": "^1.0.0",
    "vue-pop-colorpicker": "^1.0.2",
    "vue-router": "^3.4.7",
    "vue-select": "^3.10.8",
    "vue-slider-component": "^3.2.7",
    "vue-sparklines": "^0.2.1",
    "vue-sweetalert2": "^4.0.1",
    "vue2-daterange-picker": "^0.6.1",
    "vue2-google-maps": "^0.10.7",
    "vuejs-datepicker": "^1.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.8",
    "@vue/cli-plugin-eslint": "^4.5.8",
    "@vue/cli-service": "^4.5.8",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.11.0",
    "eslint-plugin-vue": "^7.1.0",
    "vue-template-compiler": "^2.6.12"
  },
  "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"
  ]
}