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 'preline'
import '@/assets/js/overlay-triggers.js'
import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
import '@fortawesome/fontawesome-free/css/all.min.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/lucide/lucide.css'
import 'choices.js/public/assets/styles/choices.min.css'
import '@/assets/css/choices-theme.css'
import '@/data/choices-init.js'
import '@/assets/css/main.css'
import '@/assets/css/style.css'
import '@/assets/css/vue.css'

// ---------- Layouts Components ---------- //

import LayoutsHeader from './views/layouts/layouts-header.vue';
import LayoutsSidebar from './views/layouts/layouts-sidebar.vue';
import SidebarMenu from './views/layouts/sidebar-menu.vue';
import FooterIndex from './views/layouts/footer-index.vue';

const app = createApp(App)

// ---------- Layouts Components ---------- //

app.component( 'layouts-header', LayoutsHeader );
app.component( 'layouts-sidebar', LayoutsSidebar)
app.component( 'sidebar-menu', SidebarMenu )
app.component( 'footer-index', FooterIndex )

app.component('vue3-select', Vue3Select);
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

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

Sidebar Logo Structure (layouts-sidebar.vue):

<router-link to="/main-menu/" class="flex items-center gap-2.5 min-w-0 rounded-xl px-2.5 py-1.5">
    <img src="@/assets/img/logo.svg" alt="Dreams Core logo" class="sidebar-logo-full max-w-[150px] object-contain shrink-0">
    <img src="@/assets/img/logo-small.svg" alt="Dreams Core logo" class="sidebar-logo-small size-8 object-contain shrink-0 hidden">
</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:

/* Update the variable inside the @theme block */
font-family: '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 {
    --gold: #D4AF37;
    --gold-light: #F4D03F;
    --gold-dark: #B8860B;
    --gold-soft: #C9A227;
}

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:

:root.hd-auto.mode-light .header-glass { 
    background: var(--bg2);
}