Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix auto-import differences for composables and components folder #22062

Merged
merged 6 commits into from Jul 10, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 29 additions & 11 deletions docs/2.guide/1.concepts/1.auto-imports.md
Expand Up @@ -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.

Expand All @@ -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.

Expand All @@ -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.

Expand All @@ -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 -->

Expand All @@ -63,7 +65,7 @@ See the full explanation in this [comment](https://github.com/nuxt/nuxt/issues/1
::NeedContribution
::

#### Example
##### Example

**Example:** Breaking code:

Expand All @@ -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:

Expand All @@ -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({
Expand All @@ -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: []
}
})
```