Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update vite.md for latest Vite configuration in Vue projects

Browse Source 
Now, Vue JS with Vite has these changes in "vite.config.js" file.
This commit is contained in:
Otabek 2024-10-17 19:39:10 +05:00 committed by GitHub
parent f9615d3657
commit 9aee948173
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
apps/www/src/content/docs/installation/vite.md
View File

@ -44,28 +44,32 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
#### `vite.config` #### `vite.config`
```typescript {5,6,9-13} ```typescript {3,4,11-15}
import path from 'node:path' import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'
import tailwind from 'tailwindcss' import autoprefixer from 'autoprefixer'
import { defineConfig } from 'vite' import tailwind from 'tailwindcss'
export default defineConfig({ import { defineConfig } from 'vite'
css: { import vue from '@vitejs/plugin-vue'
postcss: {
plugins: [tailwind(), autoprefixer()], // https://vite.dev/config/
}, export default defineConfig({
css: {
postcss: {
plugins: [tailwind(), autoprefixer()],
}, },
plugins: [vue()], },
resolve: { plugins: [
alias: { vue(),
'@': path.resolve(__dirname, './src'), ],
}, resolve: {
}, alias: {
}) '@': fileURLToPath(new URL('./src', import.meta.url))
``` }
}
})
```
</TabMarkdown> </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 npm i -D @types/node
``` ```
```typescript {15-19} ```typescript {20-22}
import path from 'node:path' import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer' import autoprefixer from 'autoprefixer'
import tailwind from 'tailwindcss' 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({ export default defineConfig({
css: { css: {
postcss: { postcss: {
plugins: [tailwind(), autoprefixer()], plugins: [tailwind(), autoprefixer()],
}, },
}, },
plugins: [vue()], plugins: [
vue(),
],
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, './src'), '@': fileURLToPath(new URL('./src', import.meta.url))
}, }
}, }
}) })
``` ```