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

::alert{type=warning} 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:

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