mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-02 10:27:15 +00:00
61 lines
2.4 KiB
Markdown
61 lines
2.4 KiB
Markdown
# Auto imports
|
|
|
|
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. These functions can be used in components, composables or plugins.
|
|
|
|
Contrary to a classic global declaration, Nuxt preserves typings and IDEs completions and hints, and only includes what is actually used in your production code.
|
|
|
|
::alert{type=info}
|
|
💡 In the documentation, every function that is not explicitly imported is auto-imported by Nuxt and can be used as-is in your code.
|
|
::
|
|
|
|
::alert{type=info}
|
|
🚧 We are working on a proper API reference that will include every Nuxt auto-imports. For now, you can find a reference on the framework repository: [github.com/nuxt/framework/blob/main/packages/nuxt3/src/auto-imports/imports.ts](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/auto-imports/imports.ts)
|
|
::
|
|
|
|
::alert{type=warning}
|
|
Auto imports don't currently work within the [server directory](/docs/directory-structure/server).
|
|
::
|
|
|
|
## Nuxt auto-imports
|
|
|
|
Nuxt auto-imports functions and composables to perform [data fetching](/docs/usage/data-fetching), get access to the [app context](/docs/usage/nuxt-app) and [runtime config](/docs/usage/runtime-config), manage [state](/docs/usage/state) or define components and plugins.
|
|
|
|
```vue
|
|
<script setup>
|
|
/* useAsyncData() and $fetch() are auto-imported */
|
|
const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
|
|
</script>
|
|
```
|
|
|
|
## 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
|
|
<script setup>
|
|
/* ref() and computed() are auto-imported */
|
|
const count = ref(1)
|
|
const double = computed(() => count.value * 2)
|
|
</script>
|
|
```
|
|
|
|
## Directory based auto-imports
|
|
|
|
Nuxt directly auto-imports files created in defined directories:
|
|
|
|
- `components/` for [Vue components](/docs/directory-structure/components).
|
|
- `composables/` for [Vue composables](/docs/directory-structure/composables).
|
|
|
|
## Explicit imports
|
|
|
|
Every Nuxt auto-import is exposed by the `#imports` alias that can be used to make the import explicit if needed:
|
|
|
|
```vue
|
|
<script setup>
|
|
import { ref, computed } from '#imports'
|
|
|
|
const count = ref(1)
|
|
const double = computed(() => count.value * 2)
|
|
</script>
|
|
```
|