From a2c5834255923b70ee313705514347dff2bf6630 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 9 Nov 2023 13:42:22 +0330
Subject: [PATCH] docs: fix `nuxt.config.ts` configuration for auto-import
 components directories (#154)

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

* docs: add `pathPrefix`: false
---
 .../www/src/content/docs/installation/nuxt.md | 34 ++++++++++++-------
 1 file changed, 22 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..acf5dab9 100644
--- a/apps/www/src/content/docs/installation/nuxt.md
+++ b/apps/www/src/content/docs/installation/nuxt.md
@@ -28,23 +28,33 @@ 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',
+        // prevent adding another prefix component by it's path.
+        pathPrefix: false
+      })
+    }
+  }
 })
 ```
 
-
-
 ### Run the CLI
 
 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>
 ```
 
-</Steps>
\ No newline at end of file
+</Steps>