v3.0

Follow the following step to install the laravel 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_vue
npm install
npm run dev

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

Make sure node.js >= v22.x and npm >= v10.x has been installed on your localhost / server

File structure overview for Vue Version

quantum_vue_v3.0/
├──template_vue_startup/      // version without demo pages
└──template_vue/              // version include all demo pages
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── .vscode/
    ├── cypress/
    ├── cypress.json
    ├── env.d.ts
    ├── index.html
    ├── package.json
    ├── public/
    ├── README.md
    ├── src/
    │   ├── App.vue
    │   ├── assets/
    │   ├── components/
    │   ├── composables/
    │   ├── main.ts
    │   ├── router/
    │   ├── scss/
    │   ├── stores/
    │   └── views/
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig-vite-config.json
    ├── tsconfig.vitest.json
    └── vite.config.mts

Below is the code from App.vue which include the app header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.

<script setup lang="ts">
import { getCurrentInstance, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router';
import { useAppOptionStore } from '@/stores/app-option';
import { ProgressFinisher, useProgress } from '@marcoschulte/vue3-progress';
import AppLoader from '@/components/app/Loader.vue';
import AppSidebar from '@/components/app/Sidebar.vue';
import AppHeader from '@/components/app/Header.vue';
import AppTopNav from '@/components/app/TopNav.vue';
import AppFooter from '@/components/app/Footer.vue';
import AppThemePanel from '@/components/app/ThemePanel.vue';
import router from './router';

const appOption = useAppOptionStore();
const internalInstance = getCurrentInstance();
const progresses = [] as ProgressFinisher[];

router.beforeEach(async (to, from) => {
  progresses.push(useProgress().start());
  appOption.appSidebarMobileToggled = false;
  appOption.appSidebarToggled = false;
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
  
  var targetElm = [].slice.call(document.querySelectorAll('.app-sidebar .menu-submenu'));
  targetElm.map(function(elm) {
    elm.style.display = '';
  });
})
router.afterEach(async (to, from) => {
  progresses.pop()?.finish();
})

document.querySelector('body').classList.add('app-init');

document.onscroll = function() {
  var doc = document.documentElement;
  var totalScroll = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
  var elm = document.querySelectorAll('.app')[0];
  
  if (elm) {
    if (totalScroll > 0) {
      elm.classList.add('app-has-scroll');
    } else {
      elm.classList.remove('app-has-scroll');
    }
  }
}
</script>

<template>
  <app-loader />
  <div class="app" v-bind:class="{ 
    'app-header-menu-search-toggled': appOption.appHeaderSearchToggled,
    'app-sidebar-toggled': appOption.appSidebarToggled && !appOption.appSidebarCollapsed,
    'app-sidebar-collapsed': appOption.appSidebarCollapsed,
    'app-sidebar-mobile-toggled': appOption.appSidebarMobileToggled,
    'app-sidebar-mobile-closed': appOption.appSidebarMobileClosed,
    'app-content-full-height': appOption.appContentFullHeight,
    'app-content-full-width': appOption.appSidebarHide,
    'app-without-sidebar': appOption.appSidebarHide,
    'app-without-header': appOption.appHeaderHide,
    'app-boxed-layout': appOption.appBoxedLayout,
    'app-with-top-nav': appOption.appTopNav,
    'app-footer-fixed': appOption.appFooterFixed,
    'app-has-scroll': appOption.appHasScroll
  }">
    <vue3-progress-bar />
    <app-header v-if="!appOption.appHeaderHide" />
    <app-top-nav v-if="appOption.appTopNav" />
    <app-sidebar v-if="!appOption.appSidebarHide" />
    <div class="app-content" v-bind:class="appOption.appContentClass">
      <router-view></router-view>
    </div>
    <app-footer v-if="appOption.appFooter" />
    <app-theme-panel />
  </div>
</template>

List of components inside the components folder

/src/components/
├── app/
│   ├── Footer.vue
│   ├── Header.vue
│   ├── Loader.vue
│   ├── NavScrollTo.vue
│   ├── Sidebar.vue
│   ├── SidebarNav.vue
│   ├── TopNav.vue
│   ├── TopNavNav.vue
│   └── ThemePanel.vue
├── bootstrap/
│   ├── Card.vue
│   ├── CardBody.vue
│   ├── CardCollapseToggler.vue
│   ├── CardExpandToggler.vue
│   ├── CardRemoveToggler.vue
│   ├── CardFooter.vue
│   ├── CardGroup.vue
│   ├── CardHeader.vue
│   ├── CardHeaderBtn.vue
│   └── CardImgOverlay.vue
└── plugins/
    ├── Apexcharts.vue
    ├── Chartjs.vue
    ├── Datepicker.vue
    ├── Highlightjs.vue
    ├── QuillEditor.vue
    ├── TagsInput.vue
    ├── Typeahead.vue
    ├── VueSelect.vue
    └── VueTable.vue

This template used mitt as event bus to emit events between component. Emitter files can be found via /composables/useEmitter.ts

import useEmitter from '@/composables/useEmitter';

const emitter = useEmitter();

// emit event
emitter.emit('my-event', true);

// event listener
this.emitter.on('my-event', (evt) => {
  // do something
});

This template used pinia to create the store and share the states variable between the components. Store files can be found via /src/stores/

/src/stores/
├─ app-option.ts            // global app option states
├─ app-sidebar-menu.ts      // global app sidebar menu list
├─ app-top-nav-menu.ts      // global app top nav menu list
└─ app-variable.ts          // global app variable (fetched from css / font variables)

You can use the global app option from /stores/app-option.ts

import { useAppOptionStore } from '@/stores/app-option';

const appOption = useAppOptionStore();

export default {
  mounted() {
    // available app option
    appThemeClass: '',
    appBoxedLayout: false,
    appHeaderHide: false,
    appHeaderSearchToggled: false,
    appHasScroll: false,
    appSidebarToggled: true,
    appSidebarCollapsed: false,
    appSidebarMobileToggled: false,
    appSidebarMobileClosed: false,
    appSidebarHide: false,
    appContentFullHeight: false,
    appContentClass: '',
    appTopNav: false,
    appFooter: false,
    appFooterFixed: false,
    appThemePanelToggled: false,
  },
  beforeUnmount() {
    // set to default before leave the page
    appOption.appBoxedLayout = false;
  }
}

You can use the global app variables (css color / font family) from /stores/app-variable.ts

import { useAppVariableStore } from '@/stores/app-variable';

const appVariable = useAppVariableStore();

export default {
  data() {
    return {
      variableName: appVariable.color.theme
      
      // font variable
      appVariable.font.family;
      appVariable.font.size;
      appVariable.font.weight;
      
      // color variable
      appVariable.color.theme;
      appVariable.color.blue;
      appVariable.color.green;
      appVariable.color.orange
      appVariable.color.red;
      appVariable.color.cyan;
      appVariable.color.purple;
      appVariable.color.yellow;
      appVariable.color.indigo;
      appVariable.color.pink;
      appVariable.color.black;
      appVariable.color.white;
      appVariable.color.gray;
      appVariable.color.dark;
      appVariable.color.gray100;
      appVariable.color.gray200;
      appVariable.color.gray300;
      appVariable.color.gray400;
      appVariable.color.gray500;
      appVariable.color.gray600;
      appVariable.color.gray700;
      appVariable.color.gray800;
      appVariable.color.gray900;
      
      // color variable (rgba)
      appVariable.color.themeRgb;
      appVariable.color.blueRgb;
      appVariable.color.greenRgb;
      appVariable.color.orange
      appVariable.color.redRgb;
      appVariable.color.cyanRgb;
      appVariable.color.purpleRgb;
      appVariable.color.yellowRgb;
      appVariable.color.indigoRgb;
      appVariable.color.pinkRgb;
      appVariable.color.blackRgb;
      appVariable.color.whiteRgb;
      appVariable.color.grayRgb;
      appVariable.color.darkRgb;
      appVariable.color.gray100Rgb;
      appVariable.color.gray200Rgb;
      appVariable.color.gray300Rgb;
      appVariable.color.gray400Rgb;
      appVariable.color.gray500Rgb;
      appVariable.color.gray600Rgb;
      appVariable.color.gray700Rgb;
      appVariable.color.gray800Rgb;
      appVariable.color.gray900Rgb;
    }
  }
}

Set the app sidebar menu list from from /stores/app-sidebar-menu.ts

// single level structure
{
  'url': '/',
  'icon': 'ph:rocket-duotone',
  'text': 'DASHBOARD'
},

// multi level structure 
{
  'icon': 'ph:envelope-duotone',
  'text': 'EMAIL',
  'children': [{
    'url': '/email/inbox',
    'action': 'Inbox',
    'text': 'INBOX'
  }, {
    'url': '/email/compose',
    'action': 'Compose',
    'text': 'COMPOSE'
  }, {
    'url': '/email/detail',
    'action': 'Detail',
    'text': 'DETAIL'
  }]
}

The default theme color is set to the teal color. You may change it from /src/scss/_variables.scss

// LINE 80
$theme:        $teal !default;

Besides that, you can also set the theme color by adding the value theme-{ color-name } to /src/stores/app-option.ts

// LINE 7
appThemeClass: 'theme-blue',

To enable RTL mode, follow these steps:

1. Navigate to the /src/scss/_variables.scss file in your code editor.
2. Find the $enable-rtl variable and change its value to true:

   $enable-rtl: true;
   

   This will enable RTL mode for your application.

Global Variables

The /src/scss/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /src/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs.

<!-- global variable -->
/src/scss/_variables.scss

We have created the common re-usable card bootstrap component for this template. You may found the card component via /src/components/bootstrap/

//usage 
<card>
  <card-header>...</card-header>
  <card-body>...</card-body>
  <card-footer>...</card-footer>
</card>

You may use the default bootstrap data attribute like data-bs-toggle="dropdown" OR import the required modules from bootstrap.

// usage example
import { ScrollSpy } from 'bootstrap';

new ScrollSpy(document.body, {
  target: '#sidebar-bootstrap',
  offset: 200
})

I've used the following images, icons or other files as listed.

Plugins

1. ApexCharts: https://apexcharts.com/
2. Axios: https://github.com/axios/axios
3. Bootstrap: http://getbootstrap.com/
4. Bootstrap Icons: https://icons.getbootstrap.com/
5. Chart.js: https://chartjs.org
6. Datatables: https://datatables.net/
7. FontAwesome: https://fontawesome.com/
8. Fullcalendar: https://fullcalendar.io/
9. Highlight.js: https://highlightjs.org/
10. Iconify: https://icon-sets.iconify.design/
11. jsvectormap: https://github.com/themustafaomar/jsvectormap
12. lity: https://sorgalla.com/lity/
13. maska: https://github.com/beholdr/maska
14. masonry: https://masonry.desandro.com/
15. mitt: https://github.com/developit/mitt
16. moment: http://momentjs.com/
17. Perfect Scrollbar: https://github.com/mercs600/vue3-perfect-scrollbar
18. Picmo: https://picmojs.com/
19. Pinia: https://pinia.vuejs.org/
20. PhotoSwipe: https://photoswipe.com/
21. Popper.js: https://popper.js.org/
22. Vue.js: https://vuejs.org/
23. Vue Colorpicker: https://caohenghu.github.io/vue-colorpicker/
24. Vue Colorpicker: https://caohenghu.github.io/vue-colorpicker/
25. Vue Countdown: https://fengyuanchen.github.io/vue-countdown/
26. Vue Quill: https://vueup.github.io/vue-quill/
27. Vue Select: https://vue-select.org/
28. Vue 3 Datepicker: https://vue3datepicker.com/
29. Vue 3 Google Map: https://github.com/inocan-group/vue3-google-map
30. Vue 3 Progress: https://github.com/marcoschulte/vue3-progress
31. Vue 3 Simple Typeahead: https://github.com/frikinside/vue3-simple-typeahead
32. Vue 3 Tags Input: https://github.com/sipec/vue-tags-input
33. Vue 3 Table Lite: https://github.com/linmasahiro/vue3-table-lite

Photos

1. Unsplash: https://unsplash.com/
2. Freepik: https://www.freepik.com/