Nuxt auto-importa componentes, composables y APIs de Vue.js para usarlos en toda tu aplicación sin necesidad de importarlos explícitamente.

const count = ref(1) // ref se auto-importa

Gracias a su estructura de directorios opinada, Nuxt puede auto-importar tus components/, composables/ y utils/.

A diferencia de una declaración global clásica, Nuxt preserva los tipos, las completaciones y sugerencias de los IDEs, y solo incluye lo que se usa en tu código de producción.

Auto-importaciones Integradas

Nuxt auto-importa funciones y composables para realizar obtención de datos, acceder al contexto de la aplicación y configuración en tiempo de ejecución, gestionar el estado o definir componentes y plugins.

/* useFetch() se auto-importa */
const { data, refresh, status } = await useFetch('/api/hello')

Vue expone APIs de Reactividad como ref o computed, así como hooks de ciclo de vida y ayudas que son auto-importadas por Nuxt.

/* ref() y computed() se auto-importan */
const count = ref(1)
const double = computed(() => count.value * 2)

Composables de Vue y Nuxt

Cuando estás usando los composables de la API de Composición integrados proporcionados por Vue y Nuxt, ten en cuenta que muchos de ellos dependen de ser llamados en el contexto correcto.

Durante el ciclo de vida de un componente, Vue rastrea la instancia temporal del componente actual (y de manera similar, Nuxt rastrea una instancia temporal de nuxtApp) a través de una variable global, y luego la desactiva en el mismo tick. Esto es esencial al renderizar en el servidor, tanto para evitar la contaminación del estado entre solicitudes (filtrando una referencia compartida entre dos usuarios) como para evitar filtraciones entre diferentes componentes.

Eso significa que (con muy pocas excepciones) no puedes usarlos fuera de un plugin de Nuxt, middleware de ruta de Nuxt o función de configuración de Vue. Además, debes usarlos de manera sincrónica, es decir, no puedes usar await antes de llamar a un composable, excepto dentro de bloques <script setup>, dentro de la función de configuración de un componente declarado con defineNuxtComponent, en defineNuxtPlugin o en defineNuxtRouteMiddleware, donde realizamos una transformación para mantener el contexto sincrónico incluso después del await.

Si recibes un mensaje de error como Nuxt instance is unavailable, probablemente significa que estás llamando a un composable de Nuxt en el lugar incorrecto en el ciclo de vida de Vue o Nuxt.

Ejemplo de código que falla:

// intentando acceder a la configuración en tiempo de ejecución fuera de un composable
const config = useRuntimeConfig()

export const useMyComposable = () => {
  // accediendo a la configuración en tiempo de ejecución aquí
}

Ejemplo de código que funciona:

export const useMyComposable = () => {
  // Debido a que tu composable se llama en el lugar correcto en el ciclo de vida,
  // useRuntimeConfig funcionará aquí
  const config = useRuntimeConfig()

  // ...
}

Auto-importaciones Basadas en Directorios

Nuxt auto-importa directamente archivos creados en directorios definidos:

• components/ para componentes de Vue.
• composables/ para composables de Vue.
• utils/ para funciones de ayuda y otras utilidades.

Importaciones Explícitas

Nuxt expone cada auto-importación con el alias #imports que puede usarse para hacer la importación explícita si es necesario:

import { ref, computed } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)

Deshabilitar Auto-importaciones

Si deseas deshabilitar la auto-importación de composables y utilidades, puedes establecer imports.autoImport en false en el archivo nuxt.config.

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

Esto deshabilitará completamente las auto-importaciones, pero aún es posible usar importaciones explícitas desde #imports.

Deshabilitar Parcialmente Auto-importaciones

Si deseas que funciones específicas del framework como ref sigan siendo auto-importadas pero deseas deshabilitar las auto-importaciones para tu propio código (por ejemplo, composables personalizados), puedes establecer la opción imports.scan en false en tu archivo nuxt.config.ts:

export default defineNuxtConfig({
  imports: {
    scan: false
  }
})

Con esta configuración:

• Las funciones del framework como ref, computed o watch seguirán funcionando sin necesidad de importaciones manuales.
• El código personalizado, como composables, necesitará ser importado manualmente en tus archivos.

Componentes Auto-importados

Nuxt también importa automáticamente componentes desde tu directorio ~/components, aunque esto se configura por separado de la auto-importación de composables y funciones de utilidad.

Para deshabilitar la auto-importación de componentes desde tu propio directorio ~/components, puedes establecer components.dirs en un array vacío (aunque ten en cuenta que esto no afectará a los componentes añadidos por módulos).

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})

Auto-importación desde Paquetes de Terceros

Nuxt también permite la auto-importación desde paquetes de terceros.

Por ejemplo, podrías habilitar la auto-importación del composable useI18n desde el paquete vue-i18n de esta manera:

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue-i18n',
        imports: ['useI18n']
      }
    ]
  }
})