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

docs: fix nuxt.config.ts configuration for auto-import components directories (#154)

Browse Source 
* docs: fix `nuxt.config.ts` components installiation step

* docs: add `pathPrefix`: false
This commit is contained in:
Sadegh Barati 2023-11-09 13:42:22 +03:30 committed by GitHub
parent 4fcfb4edf2
commit a2c5834255
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
apps/www/src/content/docs/installation/nuxt.md
View File

@ -28,23 +28,33 @@ 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',
], // prevent adding another prefix component by it's path.
pathPrefix: false
})
}
}
}) })
``` ```
### 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:
@ -128,4 +138,4 @@ The command above will add the `Button` component to your project. Nuxt autoImpo
</template> </template>
``` ```
</Steps> </Steps>