Folder Structure

Admin
dist // Ready for the production / build use

plugins //Extending Tailwind with reusable third-party plugins

src
.env

index.html

package.json

postcss.config.js

README.md

tailwind.config.ts

tsconfig.json

tsconfig.node.json

vite.config.ts

main.ts File Structure

import { App, createApp } from "vue";
import "@/assets/scss/tailwind.scss";
import MainApp from "@/App.vue";
import i18n from "@/plugins/i18n";
import router from "@/router/index";
import pinia from "@/store/index";
import VueApexCharts from "vue3-apexcharts";
import PageHeader from "@/app/common/PageHeader.vue";
import simplebar from "simplebar-vue";
import VueTippy from "vue-tippy";
import Popper from "vue3-popper";

import { vMaska } from "maska";
import VueEasyLightbox from "vue-easy-lightbox";
import { initGlobalComponents } from "@/plugins/components";

import appConfigs from "@/app/appConfig.ts";
import { initFirebaseBackend } from "@/app/service/httpService/firebaseService.ts";

if (appConfigs.auth === "firebase") {
  const firebaseConfig = {
    apiKey: appConfigs.fireBaseApiKey,
    authDomain: appConfigs.fireBaseAuthDomain,
    databaseURL: appConfigs.fireBaseDBUrl,
    projectId: appConfigs.fireBaseProjectId,
    storageBucket: appConfigs.fireBaseStorageBucket,
    messagingSenderId: appConfigs.fireBaseMsgSenderId
  };

  initFirebaseBackend(firebaseConfig);
}

export const app: App = createApp(MainApp);
initGlobalComponents(app);

app.use(pinia);
app.use(i18n);
app.use(VueApexCharts);
app.use(router);
app.use(
  VueTippy,
  {
    directive: "tippy",
    component: "tippy" 
  }
);
app.use(VueEasyLightbox);
app.directive("maska", vMaska);
app.component("simplebar", simplebar);
app.component("PageHeader", PageHeader);
app.component("Popper", Popper);

app.mount("#app");

Global Component file(/plugins/components.ts) structure

import { App } from "vue";
import TList from "@/app/components/list/index.vue";
import TDrawer from "@/app/components/drawer/index.vue";
import TMenu from "@/app/components/Menu.vue";
import TTabs from "@/app/components/tabs/index.vue";
import TTab from "@/app/components/tabs/Tab.vue";
import TCard from "@/app/components/Card.vue";
import TAvatar from "@/app/components/avatar/Default.vue";
import TAlert from "@/app/components/Alert.vue";
import TAvatarGroup from "@/app/components/avatar/Group.vue";
import TAvatarGroupWithTooltip from "@/app/components/avatar/GroupWithTooltip.vue";
import TButton from "@/app/components/Button.vue";
import TLabel from "@/app/components/Label.vue";
import TCollapse from "@/app/components/Collapse.vue";
import TCountTo from "@/app/components/CountTo.vue";
import TNotification from "@/app/components/Notification.vue";
import TModal from "@/app/components/Modal.vue";
import TProgressBar from "@/app/components/ProgressBar.vue";
import TBasicTable from "@/app/components/tables/Basic.vue";
import TDataTable from "@/app/components/tables/DataTable.vue";
import TListJsTable from "@/app/components/tables/ListJs.vue";
import TInputField from "@/app/components/formFields/InputField.vue";
import TFlatPicker from "@/app/components/datePicker/FlatPicker.vue";
import TPagination from "@/app/components/Pagination.vue";
import TTextarea from "@/app/components/formFields/Textarea.vue";
import TInputRange from "@/app/components/formFields/InputRange.vue";
import TValidationInputField from "@/app/components/formFields/ValidationInputField.vue";
import TSelect from "@/app/components/formFields/Select.vue";
import TCheckbox from "@/app/components/formFields/Checkbox.vue";
import TRadio from "@/app/components/formFields/Radio.vue";
import TSwitch from "@/app/components/formFields/Switch.vue";
import TValidationFlatPicker from "@/app/components/datePicker/ValidationFlatPicker.vue";
import TFileUploader from "@/app/components/FileUploader.vue";
import TColorPicker from "@/app/components/ColorPicker.vue";
import TMultiSelect from "@/app/components/MultiSelect.vue";
import NumberInputSpinner from "@/app/components/NumberInputSpinner.vue";
import TCkEditor from "@/app/components/editors/CKEditor.vue";
import TBallon from "@/app/components/editors/Ballon.vue";
import TInline from "@/app/components/editors/Inline.vue";

export const initGlobalComponents = (app: App) => {
    app.component("TList", TList);
    app.component("TDrawer", TDrawer);
    app.component("TMenu", TMenu);
    app.component("TTabs", TTabs);
    app.component("TTab", TTab);
    app.component("TCard", TCard);
    app.component("TAlert", TAlert);
    app.component("TAvatar", TAvatar);
    app.component("TAvatarGroup", TAvatarGroup);
    app.component("TAvatarGroupWithTooltip", TAvatarGroupWithTooltip);
    app.component("TButton", TButton);
    app.component("TLabel", TLabel);
    app.component("TCollapse", TCollapse);
    app.component("TCountTo", TCountTo);
    app.component("TNotification", TNotification);
    app.component("TModal", TModal);
    app.component("TProgressBar", TProgressBar);
    app.component("TBasicTable", TBasicTable);
    app.component("TDataTable", TDataTable);
    app.component("TListJsTable", TListJsTable);
    app.component("TInputField", TInputField);
    app.component("TFlatPicker", TFlatPicker);
    app.component("TPagination", TPagination);
    app.component("TTextarea", TTextarea);
    app.component("TInputRange", TInputRange);
    app.component("TValidationInputField", TValidationInputField);
    app.component("TSelect", TSelect);
    app.component("TCheckbox", TCheckbox);
    app.component("TRadio", TRadio);
    app.component("TSwitch", TSwitch);
    app.component("TValidationFlatPicker", TValidationFlatPicker);
    app.component("TFileUploader", TFileUploader);
    app.component("TColorPicker", TColorPicker);
    app.component("TMultiSelect", TMultiSelect);
    app.component("TNumberInputSpinner", NumberInputSpinner);
    app.component("TCkEditor", TCkEditor);
    app.component("TBallon", TBallon);
    app.component("TInline", TInline);
};

App.vue file structure

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