diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md index e4f1747b..7bf850fc 100644 --- a/apps/www/src/content/docs/installation/vite.md +++ b/apps/www/src/content/docs/installation/vite.md @@ -9,6 +9,12 @@ description: Install and configure Vite. Start by creating a new Vue project using `vite`: + + + If you're using the JS template, `jsconfig.json` must exist for the CLI to run without errors. + + + ```bash # npm 6.x npm create vite@latest my-vue-app --template vue-ts @@ -24,12 +30,18 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co - Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json + Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#89) dependency so you don't have to install it again in your package.json ```bash npm install -D tailwindcss autoprefixer ``` + + + If you're utilizing `postcss.config.js`, these changes will be inconsequential. + + + #### `vite.config` ```typescript {5,6,9-13} @@ -77,9 +89,9 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co -### Edit tsconfig.json +### Edit tsconfig/jsconfig.json -Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error +Add the code below to the compilerOptions of your `tsconfig.json` or `jsconfig.json` so your app can resolve paths without error ```json {4-7} { @@ -126,6 +138,10 @@ export default defineConfig({ }) ``` +### Delete default Vite styles + +Delete the default Vite stylesheet `./src/style.css` + ### Run the CLI Run the `shadcn-vue` init command to setup your project: @@ -150,6 +166,19 @@ Configure the import alias for components: › @/components Configure the import alias for utils: › @/lib/utils ``` +### Update main.ts + +Remove import for style.css and add add tailwind style import `import './assets/index.css'` + +```diff typescript {4} +import { createApp } from 'vue' +- import './style.css' +import App from './App.vue' ++ import './assets/index.css' + +createApp(App).mount('#app') +``` + ### That's it You can now start adding components to your project.