docs: add details and components folder to auto imports introduction (#22062)

This commit is contained in:
Eduardo Santos de Brito 2023-07-10 15:11:58 +02:00 committed by GitHub
parent 2edd7a3441
commit bf7e96c7c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -2,7 +2,9 @@
description: "Nuxt auto-imports helper functions, composables and Vue APIs." 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. 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. 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. 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> </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. 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> </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 --> <!-- 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 ::NeedContribution
:: ::
#### Example ##### Example
**Example:** Breaking code: **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: 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). - `composables/` for [Vue composables](/docs/guide/directory-structure/composables).
- `utils/` for helper functions and other utilities. - `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: 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> </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] ```ts [nuxt.config.ts]
export default defineNuxtConfig({ 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: []
}
})
```