Documentation

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import Antd from "ant-design-vue";
import VueApexCharts from "vue3-apexcharts";
import Vue3Select from 'vue3-select-component'
import VueECharts from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { GaugeChart } from "echarts/charts";
import {
  TooltipComponent,
  TitleComponent,
} from "echarts/components";


import 'preline'
import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import '@/assets/icons/lucide/lucide.css'
import '@/assets/icons/iconoir/css/iconoir.css'
import '@/assets/icons/phosphor-icons/duotone/style.css'
import '@/assets/icons/phosphor-icons/regular/style.css'
import '@/assets/icons/phosphor-icons/fill/style.css'
import '@/assets/icons/icons-webfont/tabler-icons.css'
import '@/assets/css/style.css'
import '@/assets/css/vue.css'


const app = createApp(App)

use([
  CanvasRenderer,
  GaugeChart,
  TooltipComponent,
  TitleComponent,
]);
app.component('vue3-select', Vue3Select);
app.component("v-chart", VueECharts);
app.use(VueApexCharts);
app.use(Antd)
app.use(router).mount('#app'); 

You can easily update the logo in two ways:

Option 1: Overwrite Logo Image Files (Recommended)

Directly replace the default SVG logo files in the src/assets/img/ directory with your own logos using the same file names:

• logo.svg: Main logo (shown in light mode).
• logo-small.svg: Small square logo (shown when sidebar is collapsed/minimized).
• logo-white.svg: White text logo (shown in dark mode).

Option 2: Update VUE Templates

Sidebar Logo Structure (layouts-sidebar.vue):

<router-link :to="all_routes.hrmDashboard" class="logo logo-normal">
    <img src="@/assets/img/logo.svg" alt="Logo">
</router-link>
<router-link :to="all_routes.hrmDashboard" class="logo-small">
    <img src="@/assets/img/logo-small.svg" alt="Logo">
</router-link>
<router-link :to="all_routes.hrmDashboard" class="dark-logo">
    <img src="@/assets/img/logo-white.svg" alt="Logo">
</router-link>

The default typography font for the template is Geist. If you want to change it to another Google font (like Inter or Roboto):

Open the style file src/assets/css/style.css and update the @import statement at the top of the file as well as the primary font variable in the @theme configuration block:

/* 1. Import the new Google Font at the very top of style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 2. Update the variable inside the @theme block */
@theme {
    --font-family-primary: "Inter", sans-serif;
}

All theme colors are defined as design tokens under the @theme directive in your src/assets/css/style.css file. These variables control the look and feel of components:

@theme {
    --color-primary: #0F766E;   /* primary color */
    --color-secondary: #2563EB; /* secondary color */
    --color-success: #059669;   /* success states */
    --color-warning: #D97706;   /*  warnings */
    --color-danger: #B91C1C;    /*  error states */
}

Changing Element Colors

You can customize the color of any element by editing its class or variable assignment in the CSS file. For example, changing the header topbar background color:

.navbar-header { 
    @apply bg-(--topbar-bg);
}