From 9aee9481733a6c43f89abf89dad1343025eae416 Mon Sep 17 00:00:00 2001
From: Otabek <60849894+otabekoff@users.noreply.github.com>
Date: Thu, 17 Oct 2024 19:39:10 +0500
Subject: [PATCH] Update vite.md for latest Vite configuration in Vue projects

Now, Vue JS with Vite has these changes in "vite.config.js" file.
---
 .../www/src/content/docs/installation/vite.md | 64 +++++++++++--------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md
index 9b50cecb..d14d6b31 100644
--- a/apps/www/src/content/docs/installation/vite.md
+++ b/apps/www/src/content/docs/installation/vite.md
@@ -44,28 +44,32 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 
   #### `vite.config`
 
-  ```typescript {5,6,9-13}
-  import path from 'node:path'
-  import vue from '@vitejs/plugin-vue'
-  import autoprefixer from 'autoprefixer'
+```typescript {3,4,11-15}
+import { fileURLToPath, URL } from 'node:url'
 
-  import tailwind from 'tailwindcss'
-  import { defineConfig } from 'vite'
+import autoprefixer from 'autoprefixer'
+import tailwind from 'tailwindcss'
 
-  export default defineConfig({
-    css: {
-      postcss: {
-        plugins: [tailwind(), autoprefixer()],
-      },
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  css: {
+    postcss: {
+      plugins: [tailwind(), autoprefixer()],
     },
-    plugins: [vue()],
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, './src'),
-      },
-    },
-  })
-  ```
+  },
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
+```
 
   </TabMarkdown>
 
@@ -121,26 +125,30 @@ Add the code below to the vite.config.ts so your app can resolve paths without e
 npm i -D @types/node
 ```
 
-```typescript {15-19}
-import path from 'node:path'
-import vue from '@vitejs/plugin-vue'
+```typescript {20-22}
+import { fileURLToPath, URL } from 'node:url'
+
 import autoprefixer from 'autoprefixer'
-
 import tailwind from 'tailwindcss'
-import { defineConfig } from 'vite'
 
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
 export default defineConfig({
   css: {
     postcss: {
       plugins: [tailwind(), autoprefixer()],
     },
   },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+  ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
 })
 ```