docs: add details and components folder to auto imports introduction (n…

…uxt#22062)
beerose · Jul 10, 2023 · bf7e96c · bf7e96c
1 parent 2edd7a3
commit bf7e96c
Showing 1 changed file with 29 additions and 11 deletions.
diff --git a/docs/2.guide/1.concepts/1.auto-imports.md b/docs/2.guide/1.concepts/1.auto-imports.md
@@ -2,7 +2,9 @@
 description: "Nuxt auto-imports helper functions, composables and Vue APIs."
 ---
 
-# Auto imports
+# Auto-imports
+
+## Composables and Helper Functions
 
 Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own components, composables and plugins. Components, composables or plugins can use these functions.
 
@@ -21,9 +23,9 @@ In the [server directory](/docs/guide/directory-structure/server), we auto impor
 You can also auto-import functions exported from custom folders or third-party packages by configuring the [`imports` section](/docs/api/configuration/nuxt-config#imports) of your `nuxt.config` file.
 ::
 
-## Built-in Auto-imports
+### Built-in Auto-imports
 
-### Nuxt Auto-imports
+#### Nuxt Auto-imports
 
 Nuxt auto-imports functions and composables to perform [data fetching](/docs/getting-started/data-fetching), get access to the [app context](/docs/api/composables/use-nuxt-app) and [runtime config](/docs/guide/going-further/runtime-config), manage [state](/docs/getting-started/state-management) or define components and plugins.
 
@@ -34,7 +36,7 @@ Nuxt auto-imports functions and composables to perform [data fetching](/docs/get
 </script>
 ```
 
-### Vue Auto-imports
+#### Vue Auto-imports
 
 Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hooks and helpers that are auto-imported by Nuxt.
 
@@ -46,7 +48,7 @@ Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hoo
 </script>
 ```
 
-### Using Vue and Nuxt composables
+#### Using Vue and Nuxt composables
 
 <!-- TODO: move to separate page with https://github.com/nuxt/nuxt/issues/14723 and add more information -->
 
@@ -63,7 +65,7 @@ See the full explanation in this [comment](https://github.com/nuxt/nuxt/issues/1
 ::NeedContribution
 ::
 
-#### Example
+##### Example
 
 **Example:** Breaking code:
 
@@ -88,15 +90,15 @@ export const useMyComposable = () => {
 }
 ```
 
-## Directory-based Auto-imports
+### Directory-based Auto-imports
 
 Nuxt directly auto-imports files created in defined directories:
 
 - `components/` for [Vue components](/docs/guide/directory-structure/components).
 - `composables/` for [Vue composables](/docs/guide/directory-structure/composables).
 - `utils/` for helper functions and other utilities.
 
-## Explicit Imports
+### Explicit Imports
 
 Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed:
 
@@ -109,9 +111,9 @@ Nuxt exposes every auto-import with the `#imports` alias that can be used to mak
 </script>
 ```
 
-## Disable Auto-imports
+### Disabling Auto-imports
 
-In case you want to disable auto-imports, you can set `imports.autoImport` to `false` in your `nuxt.config.ts`.
+If you want to disable auto-importing composables and utilities, you can set `imports.autoImport` to `false` in the `nuxt.config` file.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -121,4 +123,20 @@ export default defineNuxtConfig({
 })
 ```
 
-This will disable implicit auto imports completely but it's still possible to use [Explicit Imports](#explicit-imports).
+This will disable auto-imports completely but it's still possible to use [explicit imports](#explicit-imports) from `#imports`.
+
+## Auto-imported Components
+
+Nuxt also automatically imports components from your `~/components` directory, although this is configured separately from auto-importing composables and utility functions.
+
+:ReadMore{link="/docs/guide/directory-structure/components"}
+
+To disable auto-importing components from your own `~/components` directory, you can set `components.dirs` to an empty array (though note that this will not affect components added by modules).
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  components: {
+    dirs: []
+  }
+})
+```