docs: update nuxt installation with new module

This commit is contained in:
zernonia 2023-12-01 10:50:55 +08:00
parent eefea462e9
commit 02dfed5fcd

View File

@ -26,31 +26,28 @@ npm install -D typescript
npm install -D @nuxtjs/tailwindcss npm install -D @nuxtjs/tailwindcss
``` ```
### Install `shadcn-nuxt` module (New ✨)
```bash
npm install -D shadcn-nuxt
```
### 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', 'shadcn-nuxt'],
hooks: { shadcn: {
'components:dirs': (dirs) => { /**
dirs.unshift({ * Prefix for all the imported component
path: '~/components/ui', */
// this is required else Nuxt will autoImport `.ts` file prefix: '',
extensions: ['.vue'], /**
// prefix for your components, eg: UiButton * Directory that the component lives in.
prefix: 'Ui', * @default "./components/ui"
// prevent adding another prefix component by it's path. */
pathPrefix: false componentDir: './components/ui'
})
}
} }
}) })
``` ```