panel/vite.config.js

import laravel from "laravel-vite-plugin";
import { fileURLToPath } from "node:url";
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import {
  VueRouterAutoImports,
  getPascalCaseRouteName,
} from "unplugin-vue-router";
import VueRouter from "unplugin-vue-router/vite";
import { defineConfig } from "vite";
import VueDevTools from "vite-plugin-vue-devtools";
import Layouts from "vite-plugin-vue-layouts";
import vuetify from "vite-plugin-vuetify";
import svgLoader from "vite-svg-loader";

export default defineConfig({
  plugins: [
    VueRouter({
      getRouteName: (routeNode) => {
        return getPascalCaseRouteName(routeNode)
          .replace(/([a-z\d])([A-Z])/g, "$1-$2")
          .toLowerCase();
      },
      beforeWriteFiles: (root) => {
        root.insert(
          "/apps/email/:filter",
          "/resources/js/pages/apps/email/index.vue"
        );
        root.insert(
          "/apps/email/:label",
          "/resources/js/pages/apps/email/index.vue"
        );
      },
      routesFolder: "resources/js/pages",
    }),
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) =>
            tag === "swiper-container" || tag === "swiper-slide",
        },
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
    laravel({
      input: ["resources/js/main.js"],
      refresh: true,
    }),
    vueJsx(),
    vuetify({
      styles: {
        configFile: "resources/styles/variables/_vuetify.scss",
      },
    }),
    Layouts({
      layoutsDirs: "./resources/js/layouts/",
    }),
    Components({
      dirs: [
        "resources/js/@core/components",
        "resources/js/views/demos",
        "resources/js/components",
      ],
      dts: true,
      resolvers: [
        (componentName) => {
          if (componentName === "VueApexCharts")
            return {
              name: "default",
              from: "vue3-apexcharts",
              as: "VueApexCharts",
            };
        },
      ],
    }),
    AutoImport({
      imports: [
        "vue",
        VueRouterAutoImports,
        "@vueuse/core",
        "@vueuse/math",
        "vue-i18n",
        "pinia",
      ],
      dirs: [
        "./resources/js/@core/utils",
        "./resources/js/@core/composable/",
        "./resources/js/composables/",
        "./resources/js/utils/",
        "./resources/js/plugins/*/composables/*",
      ],
      vueTemplate: true,
      ignore: ["useCookies", "useStorage"],
      eslintrc: {
        enabled: true,
        filepath: "./.eslintrc-auto-import.json",
      },
    }),
    VueI18nPlugin({
      runtimeOnly: true,
      compositionOnly: true,
      include: [
        fileURLToPath(
          new URL("./resources/js/plugins/i18n/locales/**", import.meta.url)
        ),
      ],
    }),
    svgLoader(),
    VueDevTools(),
  ],
  server: {
    port: 5173,
    hmr: {
      host: "localhost",
      port: 5174,
      protocol: "ws",
    },
    watch: {
      usePolling: false,
    },
    proxy: {
      "/api": {
        target: "https://introduces-dover-changelog-academic.trycloudflare.com",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ""),
        secure: false,
      },
    },
  },
  define: { "process.env": {} },
  resolve: {
    alias: {
      "@core-scss": fileURLToPath(
        new URL("./resources/styles/@core", import.meta.url)
      ),
      "@": fileURLToPath(new URL("./resources/js", import.meta.url)),
      "@themeConfig": fileURLToPath(
        new URL("./themeConfig.js", import.meta.url)
      ),
      "@core": fileURLToPath(new URL("./resources/js/@core", import.meta.url)),
      "@layouts": fileURLToPath(
        new URL("./resources/js/@layouts", import.meta.url)
      ),
      "@images": fileURLToPath(new URL("./resources/images/", import.meta.url)),
      "@styles": fileURLToPath(new URL("./resources/styles/", import.meta.url)),
      "@configured-variables": fileURLToPath(
        new URL("./resources/styles/variables/_template.scss", import.meta.url)
      ),
      "@db": fileURLToPath(
        new URL("./resources/js/plugins/fake-api/handlers/", import.meta.url)
      ),
      "@api-utils": fileURLToPath(
        new URL("./resources/js/plugins/fake-api/utils/", import.meta.url)
      ),
    },
  },
  build: {
    chunkSizeWarningLimit: 5000,
  },
  optimizeDeps: {
    exclude: ["vuetify"],
    entries: ["./resources/js/**/*.vue"],
  },
});