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.

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.

Built-in Auto-imports

Nuxt Auto-imports

Nuxt auto-imports functions and composables to performdata fetching, get access to theapp context andruntime config, managestate or define components and plugins.

<scriptsetuplang="ts">/* useAsyncData() and $fetch() are auto-imported */const {data,refresh,pending }=awaituseAsyncData('/api/hello', ()=>$fetch('/api/hello'))</script>

Vue Auto-imports

Vue 3 exposes Reactivity APIs likeref orcomputed, as well as lifecycle hooks and helpers that are auto-imported by Nuxt.

<scriptsetuplang="ts">/* ref() and computed() are auto-imported */constcount=ref(1)constdouble=computed(()=>count.value*2)</script>

Using Vue and Nuxt composables

When you are using the built-in Composition API composables provided by Vue and Nuxt, be aware that many of them rely on being called in the rightcontext.

During a component lifecycle, Vue tracks the temporary instance of the current component (and similarly, Nuxt tracks a temporary instance ofnuxtApp) via a global variable, and then unsets it in same tick. This is essential when server rendering, both to avoid cross-request state pollution (leaking a shared reference between two users) and to avoid leakage between different components.

That means that (with very few exceptions) you cannot use them outside a Nuxt plugin, Nuxt route middleware or Vue setup function. On top of that, you must use them synchronously - that is, you cannot useawait before calling a composable, except within<script setup> blocks, within the setup function of a component declared withdefineNuxtComponent, indefineNuxtPlugin or indefineNuxtRouteMiddleware, where we perform a transform to keep the synchronous context even after theawait.

If you get an error message likeNuxt instance is unavailable then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle.

See the full explanation in thiscomment.

Example

Example: Breaking code:

// trying to access runtime config outside a composableconstconfig=useRuntimeConfig()exportconstuseMyComposable= ()=> {// accessing runtime config here}

Example: Fixing the error:

exportconstuseMyComposable= ()=> {// Because your composable is called in the right place in the lifecycle,// useRuntimeConfig will also workconstconfig=useRuntimeConfig()// ...}

Directory-based Auto-imports

Nuxt directly auto-imports files created in defined directories:

• components/ forVue components.
• composables/ forVue composables.
• utils/ for helper functions and other utilities.

Explicit Imports

Nuxt exposes every auto-import with the#imports alias that can be used to make the import explicit if needed:

<scriptsetuplang="ts">import {ref,computed }from'#imports'constcount=ref(1)constdouble=computed(()=>count.value*2)</script>

Disabling Auto-imports

If you want to disable auto-importing composables and utilities, you can setimports.autoImport tofalse in thenuxt.config file.

exportdefaultdefineNuxtConfig({imports: {autoImport:false  }})

This will disable auto-imports completely but it's still possible to useexplicit 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.

To disable auto-importing components from your own~/components directory, you can setcomponents.dirs to an empty array (though note that this will not affect components added by modules).

exportdefaultdefineNuxtConfig({components: {dirs: []  }})

Auto-import from third-party packages

Nuxt also allows auto-importing from third-party packages.

For example, you could enable the auto-import of theuseI18n composable from thevue-i18n package like this:

exportdefaultdefineNuxtConfig({imports: {presets: [      {from:'vue-i18n',imports: ['useI18n']      }    ]  }})