Vue Structure | Steex - Admin & Dashboard Template

File structure

main.ts file structure.

import { createApp, App } from "vue";
import { registerPlugins } from "@/plugins";
import i18n from "@/plugins/i18n";
import AppMain from "@/App.vue";

import "@/assets/scss/app.scss";

import "simplebar";
import "simplebar/dist/simplebar.min.css";

import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";

import "emoji-picker-element";

import { vMaska } from "maska";

import "maz-ui/css/main.css";
import MazPhoneNumberInput from "maz-ui/components/MazPhoneNumberInput";

import VueApexCharts from "vue3-apexcharts";

import CountTo from "@/app/lib/CountTo.vue";
import ListMenu from "@/app/common/components/ListMenu.vue";
import ListMenuWithIcon from "@/app/common/components/ListMenuWithIcon.vue";
import Card from "@/app/common/components/Card.vue";
import Breadcrumb from "@/app/common/components/Breadcrumb.vue";
import TextField from "@/app/common/validationComponents/TextField.vue";
import TextArea from "@/app/common/validationComponents/TextArea.vue";

const app: App = createApp(AppMain);
registerPlugins(app);

app.use(i18n);
app.use(VueApexCharts);

app.component("CountTo", CountTo);
app.component("ListMenu", ListMenu);
app.component("Card", Card);
app.component("VueDatePicker", VueDatePicker);
app.component("ListMenuWithIcon", ListMenuWithIcon);
app.component("Breadcrumb", Breadcrumb);
app.component("TextField", TextField);
app.component("TextArea", TextArea);
app.directive("maska", vMaska);
app.component("MazPhoneNumberInput", MazPhoneNumberInput);

app.mount("#app");

App.vue file structure.

<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from "vue";
import { setAttributes, setSiteFontFamilyByTheme } from "@/store/utils";
import { useTheme } from "vuetify";
import { useLayoutStore } from "@/store/app";

const state = useLayoutStore();
const theme = useTheme();

const scrollTop = ref(document.documentElement.scrollTop);

onMounted(() => {
    const {
        layoutType,
        layoutTheme,
        layoutWidth,
        mode,
        position,
        topBarColor,
        sideBarSize,
        sideBarColor,
        dir,
    } = state;
    const initialThemeSetup: { [key: string]: string } = {
        ["data-layout"]: layoutType,
        ["data-theme"]: layoutTheme,
        ["data-layout-width"]: layoutWidth,
        ["data-bs-theme"]: mode,
        ["data-layout-position"]: position,
        ["data-topbar"]: topBarColor,
        ["data-sidebar-size"]: sideBarSize,
        ["data-sidebar"]: sideBarColor,
        ["dir"]: dir,
    };

    for (const key in initialThemeSetup) {
        setAttributes(key, initialThemeSetup[key]);
    }

    if (mode === "dark") {
        theme.change(
            layoutTheme === "default" ? "defaultThemeDark" : `${layoutTheme}Dark`
        );
    } else {
        theme.change(
            layoutTheme === "default" ? "defaultTheme" : layoutTheme
        );
    }

    addScrollEventListener();
    setSiteFontFamilyByTheme(layoutTheme);
});

const addScrollEventListener = () => {
    document.addEventListener("scroll", () => {
        scrollTop.value = document.documentElement.scrollTop;
    });
};

const onScrollTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

onBeforeUnmount(() => {
    document.removeEventListener("scroll", () => {
        scrollTop.value = 0;
    });
});
<script>

<template>
    <component v-if="$route.meta.layout" :is="$route.meta.layout">
        <router-view />
    </component>
    <router-view v-else />

    <v-btn
        v-if="scrollTop > 300"
        icon
        color="secondary"
        class="scroll-to-top-btn"
        rounded
        density="comfortable"
        @click="onScrollTop"
        >
        <i class="bx bx-up-arrow" />
    </v-btn>
</template>

Theme Setup

use LAYOUT_THEME const to set the theme. You can set the theme in the src/store/app.ts file's state.

layoutTheme=LAYOUT_THEME.DEFAULT	To set default theme
layoutTheme=LAYOUT_THEME.MATERIAL	To set material theme
layoutTheme=LAYOUT_THEME.CREATIVE	To set creative theme
layoutTheme=LAYOUT_THEME.MINIMAL	To set minimal theme
layoutTheme=LAYOUT_THEME.MODERN	To set modern theme
layoutTheme=LAYOUT_THEME.INTERACTION	To set interaction theme

Layout setup

You can set the default layout in the src/store/app.ts file.

layoutType=LAYOUTS.VERTICAL	To set default layout as Vertical
layoutType=LAYOUTS.HORIZONTAL	To set default layout as Horizontal
layoutType=LAYOUTS.TWO_COLUMN	To set default layout as Two column
mode=SITE_THEME.LIGHT	To set Light layout mode.
mode=SITE_THEME.DARK	To set Dark layout mode.
sidebarSize=SIDEBAR_SIZE.DEFAULT layoutWidth=LAYOUT_WIDTH.FLUID	To set layout width Fluid and left sidebar large.
position=LAYOUT_POSITION.FIXED	To set layout position Fixed.
position=LAYOUT_POSITION.SCROLLABLE	To set layout position Scrollable.
topbar=TOP_BAR.LIGHT	To set the Light color of Topbar.
topbar=TOP_BAR.DARK	To set the dark color of Topbar.
sidebarSize=SIDEBAR_SIZE.DEFAULT	To set the Large left sidebar.
sidebarSize=SIDEBAR_SIZE.COMPACT	To set the Compact left sidebar.
sidebarSize=SIDEBAR_SIZE.SMALL	To set the Icon view left sidebar.
sidebarColor=SIDEBAR_COLOR.LIGHT	To set the Light color of left Sidebar.
sidebarColor=SIDEBAR_COLOR.DARK	To set the Dark color of left Sidebar.
sidebarColor=SIDEBAR_COLOR.GRADIENT	To set the Gradient color of left Sidebar.
sidebarColor=SIDEBAR_COLOR.GRADIENT2	To set the Gradient-2 color of left Sidebar.
sidebarColor=SIDEBAR_COLOR.GRADIENT3	To set the Gradient-3 color of left Sidebar.
sidebarColor=SIDEBAR_COLOR.GRADIENT4	To set the Gradient-4 color of left Sidebar.
sidebarImage="default"	To Disable image on left Sidebar.
sidebarImage="img-1"	To set the img-1 Image of left Sidebar.
sidebarImage="img-2"	To set the img-2 Image of left Sidebar.
sidebarImage="img-3"	To set the img-3 Image of left Sidebar.
sidebarImage="img-4"	To set the img-4 Image of left Sidebar.