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

docs: update vite.md for latest Vite configuration in Vue projects (#817)

Browse Source
This commit is contained in:
Otabek 2024-10-22 21:39:47 +05:00 committed by GitHub
parent f9615d3657
commit 4f3bb61283
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

52
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'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
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))
}, }
}, }
}) })
``` ```
</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))
}, }
}, }
}) })
``` ```