Documentation

import { createApp } from 'vue'
import { createPinia } from 'pinia'

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'

// Preline's root entry auto-inits on import. The subpath 'preline/dist/preline.js'
// the scaffold used is not in v4's exports map and breaks the production build.
import 'preline'

import '@phosphor-icons/web/duotone'
import '@phosphor-icons/web/regular'
import '@phosphor-icons/web/fill'
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/lucide.css'
import '@/assets/css/style.css'
import '@/assets/css/vue.css'

const app = createApp(App)

app.component('vue3-select', Vue3Select);
app.use(VueApexCharts);
app.use(createPinia())
app.use(router)
app.use(Antd);
app.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

If you want to use different names or paths, open the template partial files: src/layouts/partials/AppHeader.vue and src/layouts/partials/LayoutsSidebar.vue, and search for the logo tags to modify their src attribute:

Topbar Logo Structure (AppHeader.vue):

<router-link :to="{ name: 'index' }" class="logo">
    <span class="logo-light">
        <span class="logo-lg"><img src="@/assets/img/logo.svg" alt="logo"></span>
        <span class="logo-sm"><img src="@/assets/img/logo-small.svg" alt="small logo"></span>
    </span>
    <span class="logo-dark">
        <span class="logo-lg"><img src="@/assets/img/logo-white.svg" alt="dark logo"></span>
    </span>
</router-link>

Sidebar Logo Structure (AppSidebar.vue):

<router-link :to="{ name: 'index' }" class="logo logo-normal">
    <img src="@/assets/img/logo.svg" alt="Logo">
</router-link>
<router-link :to="{ name: 'index' }" class="logo-small">
    <img src="@/assets/img/logo-small.svg" alt="Logo">
</router-link>
<router-link :to="{ name: 'index' }" 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:

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

// Font Family
--font-family-primary: "Inter", sans-serif;

The design token variables are defined in the @theme block of your CSS file. Here are the primary color tokens:

--color-primary: #7A13F0;
--color-success: #009966;
--color-info: #155DFC;
--color-warning: #E88C30;
--color-danger: #E5252A;

Background Color Change

You can change the header background color in style.css as per your wish

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