From 8cd84d73c985ee5546f72b4fb7b122a26c0f4bb1 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Wed, 8 Nov 2023 15:10:56 +0330
Subject: [PATCH] docs: fix `nuxt.config.ts` components installiation step

---
 .../www/src/content/docs/installation/nuxt.md | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md
index 64b16b10..bead9083 100644
--- a/apps/www/src/content/docs/installation/nuxt.md
+++ b/apps/www/src/content/docs/installation/nuxt.md
@@ -28,23 +28,31 @@ npm install -D @nuxtjs/tailwindcss
 
 ### 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
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss'],
-  components: [
-    {
-      path: '~/components/ui',
-      // this is required else Nuxt will autoImport `.ts` file
-      extensions: ['.vue'],
-      // prefix for your components, eg: UiButton
-      prefix: 'Ui'
-    },
-  ],
+  hooks: {
+    'components:dirs': (dirs) => {
+      dirs.unshift({
+        path: '~/components/ui',
+        // this is required else Nuxt will autoImport `.ts` file
+        extensions: ['.vue'],
+        // prefix for your components, eg: UiButton
+        prefix: 'Ui'
+      })
+    }
+  }
 })
 ```
 
-
-
 ### Run the CLI
 
 Run the `shadcn-vue` init command to setup your project:
@@ -128,4 +136,4 @@ The command above will add the `Button` component to your project. Nuxt autoImpo
 </template>
 ```
 
-</Steps>
\ No newline at end of file
+</Steps>