Overview

We have used yarn serve to compile the vue app files.

main.js file :

Copyimport { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import VueApexCharts from "vue3-apexcharts";
import vClickOutside from "click-outside-vue3";
import { registerScrollSpy } from 'vue3-scroll-spy';

import { vMaska } from "maska"
import i18n from "./i18n"
import { initFirebaseBackend } from './authUtils'
import { configureFakeBackend } from './helpers/fake-backend';

import BootstrapVueNext from 'bootstrap-vue-next'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
import "@/assets/scss/app.scss";
import "@vueform/multiselect/themes/default.css"

// PINIA
import pinia from '@/state/pinia'

const firebaseConfig = {
  apiKey: process.env.VUE_APP_APIKEY,
  authDomain: process.env.VUE_APP_AUTHDOMAIN,
  databaseURL: process.env.VUE_APP_VUE_APP_DATABASEURL,
  projectId: process.env.VUE_APP_PROJECTId,
  storageBucket: process.env.VUE_APP_STORAGEBUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGINGSENDERID,
  appId: process.env.VUE_APP_APPId,
  measurementId: process.env.VUE_APP_MEASUREMENTID
};

if (process.env.VUE_APP_DEFAULT_AUTH === "firebase") {
  initFirebaseBackend(firebaseConfig);
} else {
  configureFakeBackend();
}

import 'sweetalert2/dist/sweetalert2.min.css';
import '@vueform/slider/themes/default.css';

createApp(App)
  .use(pinia)
  .use(router)
  .use(require('vue-chartist'))
  .use(BootstrapVueNext)
  .use(VueApexCharts)
  .use(vClickOutside)
  .use(i18n)
  .use(registerScrollSpy)
  .directive("maska", vMaska)
  .mount('#app')
                                                            

Layout setup

You can set the default layout in the src/state/pinia/layout.js file.

Copyimport { defineStore } from "pinia";
export const useLayoutStore = defineStore("layout", {
    state: () => ({
        layoutType: "vertical",
        leftSidebarType: "dark",
        layoutWidth: "fluid",
        topbar: "dark",
        loader: false,
        mode: "light"
      }),
      actions: {
        changeLayoutType(layoutType) {
          this.layoutType = layoutType;
        },
        changeLayoutWidth(layoutWidth) {
          this.layoutWidth = layoutWidth;
        },
        changeLeftSidebarType(leftSidebarType) {
          this.leftSidebarType = leftSidebarType;
        },
        changeTopbar(topbar) {
          this.topbar = topbar;
        },
        changeLoaderValue(loader) {
          this.loader = loader;
        },
        changeMode(mode) {
            this.mode = mode
        }
      }
    });