composables

Usa el directorio composables/ para importar automáticamente tus composables de Vue en tu aplicación.

Uso

Método 1: Usando exportación nombrada

composables/useFoo.ts

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

Método 2: Usando exportación por defecto

composables/use-foo.ts or composables/useFoo.ts

// Estará disponible como useFoo() (camelCase del nombre del archivo sin extensión)
export default function () {
  return useState('foo', () => 'bar')
}

Uso: Ahora puedes usar composables importados automáticamente en archivos .js, .ts y .vue

app.vue

<script setup lang="ts">
const foo = useFoo()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>

El directorio composables/ en Nuxt no proporciona capacidades de reactividad adicionales a tu código. En su lugar, cualquier reactividad dentro de los composables se logra utilizando los mecanismos de la Composition API de Vue, como ref y reactive. Ten en cuenta que el código reactivo tampoco está limitado a los límites del directorio composables/. Eres libre de emplear características de reactividad donde las necesites en tu aplicación.

Ver también guide > concepts > auto-imports

Editar y previsualizar el código de ejemploexamples > features > auto-imports

Tipos

Internamente, Nuxt genera automáticamente el archivo .nuxt/imports.d.ts para declarar los tipos.

Ten en cuenta que debes ejecutar nuxt prepare, nuxt dev o nuxt build para permitir que Nuxt genere los tipos.

Si creas un composable sin tener el servidor de desarrollo en ejecución, TypeScript lanzará un error, como Cannot find name 'useBar'.

Ejemplos

Composables anidados

Puedes usar un composable dentro de otro composable usando importaciones automáticas:

composables/test.ts

export const useFoo = () => {
  const nuxtApp = useNuxtApp()
  const bar = useBar()
}

Acceder a inyecciones de plugins

Puedes acceder a inyecciones de plugins desde composables:

composables/test.ts

export const useHello = () => {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$hello
}

Cómo se escanean los archivos

Nuxt solo escanea archivos en el nivel superior del directorio composables/, por ejemplo:

Estructura del Directorio

-| composables/
---| index.ts     // escaneado
---| useFoo.ts    // escaneado
---| nested/
-----| utils.ts   // no escaneado

Solo composables/index.ts y composables/useFoo.ts serían buscados para importaciones.

Para que las importaciones automáticas funcionen para módulos anidados, podrías re-exportarlos (recomendado) o configurar el escáner para incluir directorios anidados:

Ejemplo: Re-exporta los composables que necesitas desde el archivo composables/index.ts:

composables/index.ts

// Habilita la importación automática para esta exportación
export { utils } from './nested/utils.ts'

Ejemplo: Escanea directorios anidados dentro de la carpeta composables/:

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    dirs: [
      // Escanea composables de nivel superior
      '~/composables',
      // ... o escanea composables anidados un nivel profundo con un nombre específico y extensión de archivo
      '~/composables/*/index.{ts,js,mjs,mts}',
      // ... o escanea todos los composables dentro del directorio dado
      '~/composables/**'
    ]
  }
})

※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.

La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/guide/directory-structure/composables