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";

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 change the logo in your Vue project by following these steps:

1. Replace the Logo Image:
   • Place your new logo image (e.g., logo.svg or logo.png) in the src/assets/img/logo/ folder.
2. Update the Logo Import in Your Component:
   • Open the Vue component where the logo is used (commonly src/components/Header.tsx, Navbar.tsx, or similar).
   • Update the import statement to use your new logo file. For example:

   import logo from '../assets/img/logo/logo.svg';

3. Update the Logo Usage in JSX:
   • Replace the <img> tag's src attribute to use the imported logo variable:

   {``}

4. Save and View Changes:
   • Save the file and check your app in the browser. The new logo should appear in place of the old one.

The default font is Google Sans Flex. To change the font:

Update the @import URL and the --font-family-primary variable in src/style/css/style.css:

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

@theme {
  --font-family-primary: "Google Sans Flex", sans-serif;
}

The design token variables are defined in the @theme block of src/style/css/style.css. Here are the primary color tokens:

--color-primary: #023DC9;
--color-secondary: #FE1C06;
--color-dark: #020610;
--color-white: #FFFFFF;
--color-light: #F0F4F8;

--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #EF4444;
--color-info: #0EA5E9;

Each of primary, secondary, success, warning, danger, info, purple, gray, light, pink, orange, cyan, indigo and teal also ship a full shade scale (100–900 plus a -hover/-transparent variant), e.g. --color-primary-100 through --color-primary-900 and --color-primary-hover. Semantic tokens for the sidebar (--sidebar-bg, --sidebar-menu-item) and topbar (--topbar-bg, --topbar-item) are also defined in the same block.

Background Color Change

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

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