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. However, auto imports don't currently work within the server scope. They just work within the Vue portion of your app.

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](https://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](/docs/usage/data-fetching), get access to the [app context](/docs/usage/nuxt-app) and [runtime config](/docs/usage/runtime-config), manage [state](/docs/usage/state) or define components and plugins.

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

```vue
<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](/docs/directory-structure/components).
- `composables/` for [Vue composables](/docs/directory-structure/composables).

## Explicit imports

Every Nuxt auto-import is exposed by the `#imports` alias that can be used to make the import explicit if needed:

```vue
<script setup>
  import { ref, computed } from '#imports'

  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>
```