diff --git a/docs/2.guide/1.concepts/1.auto-imports.md b/docs/2.guide/1.concepts/1.auto-imports.md index 0f042b5082dc..63c307c46f05 100644 --- 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 ``` -### 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 ``` -### Using Vue and Nuxt composables +#### Using Vue and Nuxt composables @@ -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,7 +90,7 @@ export const useMyComposable = () => { } ``` -## Directory-based Auto-imports +### Directory-based Auto-imports Nuxt directly auto-imports files created in defined directories: @@ -96,7 +98,7 @@ Nuxt directly auto-imports files created in defined directories: - `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 ``` -## 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: [] + } +}) +```