feat(configs): import vuetify calendar, manage alias in tsconfig and vite.config.js

resources/js/vuetify.ts

@@ -2,8 +2,9 @@
 import "vuetify/styles";
 import '@mdi/font/css/materialdesignicons.css'
 import {createVuetify, type ThemeDefinition} from "vuetify";
-import * as components from "vuetify/components";
+import * as baseComponents from "vuetify/components";
 import * as directives from "vuetify/directives";
+import { VCalendar } from 'vuetify/labs/VCalendar'
 
 /**
  * Example of custom Theme
@@ -38,7 +39,10 @@ const customTheme: ThemeDefinition = {
 };
 
 const vuetify = createVuetify({
-    components,
+    components: {
+        ...baseComponents,
+        VCalendar,
+    },
     directives,
     theme: {
         defaultTheme: 'customTheme',

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "baseUrl": ".",
   "extends": "@vue/tsconfig/tsconfig.json",
   "include": [
     "resources/**/*.ts",
@@ -10,7 +11,9 @@
     "strict": false,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["resources/js/*"]
+      "@/*": ["resources/js/*"],
+      "@models/*":["resources/js/composables/content/models/*"],
+      "@partials/*":["resources/js/components/content/partials/*"]
     },
     "types": ["vite/client"]
   }

vite.config.js

@@ -1,6 +1,29 @@
 import { defineConfig, loadEnv } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from "@vitejs/plugin-vue";
+import path from "path";
+import * as node_fs from 'fs'
+import tsconfig from "./tsconfig.json";
+
+// https://github.com/vitejs/vite/issues/6828#issuecomment-1059770150
+const tsconfigPathAliases = Object.fromEntries(
+    Object.entries(tsconfig.compilerOptions.paths).map(([key, values]) => {
+        let value = values[0];
+        if (key.endsWith("/*")) {
+            key = key.slice(0, -2);
+            value = value.slice(0, -2);
+        }
+
+        const nodeModulesPrefix = "node_modules/";
+        if (value.startsWith(nodeModulesPrefix)) {
+            value = value.replace(nodeModulesPrefix, "");
+        } else {
+            value = path.join(__dirname, value);
+        }
+
+        return [key, value];
+    })
+);
 
 export default defineConfig(({mode}) => {
     process.env = {...process.env, ...loadEnv(mode, process.cwd())}
@@ -15,6 +38,9 @@ export default defineConfig(({mode}) => {
                 refresh: true,
             }),
         ],
+        resolve: {
+            alias: tsconfigPathAliases,
+        },
         build: {
             sourcemap: true,
         },