mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 23:22:02 +00:00
docs: add details and components folder to auto imports introduction (#22062)
This commit is contained in:
parent
2edd7a3441
commit
bf7e96c7c6
@ -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: []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
Loading…
Reference in New Issue
Block a user