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. 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.

In the documentation, every function that is not explicitly imported is auto-imported by Nuxt and can be used as-is in your code. You can find a reference for auto-imported composables and utilities in the API section.

Auto imports don't currently work within the server directory.

Nuxt Auto-imports

Nuxt auto-imports functions and composables to perform data fetching, get access to the app context and runtime config, manage state or define components and plugins.

<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.

<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:

Explicit Imports

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

<script setup>  import { ref, computed } from '#imports'  const count = ref(1)  const double = computed(() => count.value * 2)</script>

Disable Auto-imports

In case you want to disable auto-imports, you can set imports.autoImport to false.

nuxt.config.ts
export default defineNuxtConfig({  imports: {    autoImport: false  }})

This will disable implicit auto imports completely but it's still possible to use Explicit Imports.