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