v4.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

hud_vue_v4.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.ts

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 { RouterLink, RouterView } from 'vue-router';
import { useAppOptionStore } from '@/stores/app-option';
import AppSidebar from '@/components/app/Sidebar.vue';
import AppHeader from '@/components/app/Header.vue';
import AppFooter from '@/components/app/Footer.vue';
import AppTopNav from '@/components/app/TopNav.vue';
import AppThemePanel from '@/components/app/ThemePanel.vue';

const appOption = useAppOptionStore();
</script>

<template>
  <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,
  }">
    <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
│   ├── NavScrollTo.vue
│   ├── Sidebar.vue
│   ├── SidebarNav.vue
│   ├── TopNav.vue
│   ├── TopNavNav.vue
│   └── ThemePanel.vue
├── bootstrap/
│   ├── Card.vue
│   ├── CardBody.vue
│   ├── CardExpandToggler.vue
│   ├── CardFooter.vue
│   ├── CardGroup.vue
│   ├── CardHeader.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
    appOption.appMode = 'dark';
    appOption.appThemeClass= '';
    appOption.appCoverClass= '';
    appOption.appBoxedLayout= true;
    appOption.appHeaderHide= true;
    appOption.appHeaderSearchToggled= true;
    appOption.appSidebarCollapsed= true;
    appOption.appSidebarMobileToggled= true;
    appOption.appSidebarMobileClosed= true;
    appOption.appSidebarHide= true;
    appOption.appContentFullHeight= true;
    appOption.appContentClass= '';
    appOption.appTopNav = true,
    appOption.appFooter= true;
    appOption.appFooterFixed= true;
    appOption.appThemePanelToggled= true;
  },
  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': 'bi bi-cpu',
  'text': 'Dashboard'
},

// multi level structure 
{
  'icon': 'bi bi-envelope',
  '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',

Add the 'cover' class to the <html> tag in /template_vue/index.html to change the page cover. You can modify the cover image from /src/scss/images/. Note that both light and dark mode have separate background cover images.

Available Cover Options

<html class="bg-cover-2">
<html class="bg-cover-3">
<html class="bg-cover-4">
<html class="bg-cover-5">
<html class="bg-cover-6">
<html class="bg-cover-7">
<html class="bg-cover-8">
<html class="bg-cover-9">

Starting from version 2.0, we have implemented a default dark mode theme that is applied to the page in /template_vue/index.html. This is achieved through the use of the data-bs-theme="dark" attribute in the <html> tag.

If you wish to enable the light mode instead, you can easily do so by removing the data-bs-theme="dark" attribute from the HTML tag. This will disable the default dark mode and enable the light mode theme.

Please note that once you remove the data-bs-theme="dark" attribute, the light mode theme will persist even if the user refreshes the page or navigates to a different page within the application.

Here's an example:

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
</html>

<!DOCTYPE html>
<html lang="en">
</html>

With this example, the data-bs-theme="dark" attribute has been removed from html tag. This will enable the light mode to the entire page.

OR

If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.

<card data-bs-theme="light">
  <card-body>
    <!-- your component content here -->
  </card-body>
</card>

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

Dark Mode Variables

The /src/scss/_variables-dark.scss file contains the variables that control the styles for dark mode. These variables are used in conjunction with the variables in the /src/scss/_variables.scss file to provide different values for light and dark modes.

<!-- dark mode variable -->
/src/scss/_variables-dark.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/