Nuxt/docs/content/2.concepts/4.auto-imports.md

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.

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

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.

These functions can be used in components, composables or 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:

• components/ for Vue components.
• composables/ for Vue composables.

Explicit imports

Every Nuxt auto-import is exposed by 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>