docs: fix nuxt.config.ts components installiation step

This commit is contained in:
sadeghbarati 2023-11-08 15:10:56 +03:30
parent 4fcfb4edf2
commit 8cd84d73c9

View File

@ -28,23 +28,31 @@ npm install -D @nuxtjs/tailwindcss
### Configure `nuxt.config.ts` ### Configure `nuxt.config.ts`
<Callout class="mt-4">
**Tip:** It's better to use Nuxt `components:dirs` hook to extend auto-import components directories.
If you use `components` key in `nuxt.config.ts` default config will disposed
</Callout>
```ts ```ts
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss'], modules: ['@nuxtjs/tailwindcss'],
components: [ hooks: {
{ 'components:dirs': (dirs) => {
path: '~/components/ui', dirs.unshift({
// this is required else Nuxt will autoImport `.ts` file path: '~/components/ui',
extensions: ['.vue'], // this is required else Nuxt will autoImport `.ts` file
// prefix for your components, eg: UiButton extensions: ['.vue'],
prefix: 'Ui' // prefix for your components, eg: UiButton
}, prefix: 'Ui'
], })
}
}
}) })
``` ```
### Run the CLI ### Run the CLI
Run the `shadcn-vue` init command to setup your project: Run the `shadcn-vue` init command to setup your project: