composables

Use o diretório composables/ para importar automaticamente seus composables Vue em sua aplicação.

Uso

Método 1: Usando exportação nomeada

composables/useFoo.ts

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

Método 2: Usando exportação padrão

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

// Estará disponível como useFoo() (camelCase do nome do arquivo sem extensão)
export default function () {
  return useState('foo', () => 'bar')
}

Uso: Agora você pode usar composables importados automaticamente em arquivos .js, .ts e .vue

app.vue

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

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

O diretório composables/ no Nuxt não fornece nenhuma capacidade adicional de reatividade ao seu código. Em vez disso, qualquer reatividade dentro dos composables é alcançada usando os mecanismos da Composition API do Vue, como ref e reactive. Note que o código reativo também não está limitado aos limites do diretório composables/. Você é livre para empregar recursos de reatividade onde quer que sejam necessários em sua aplicação.

Veja também guide > concepts > auto-imports

Editar e visualizar o código de exemploexamples > features > auto-imports

Tipos

Nos bastidores, o Nuxt gera automaticamente o arquivo .nuxt/imports.d.ts para declarar os tipos.

Esteja ciente de que você precisa executar nuxt prepare, nuxt dev ou nuxt build para permitir que o Nuxt gere os tipos.

Se você criar um composable sem ter o servidor de desenvolvimento em execução, o TypeScript lançará um erro, como Cannot find name 'useBar'.

Exemplos

Composables Aninhados

Você pode usar um composable dentro de outro composable usando importações automáticas:

composables/test.ts

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

Acessar injeções de plugins

Você pode acessar injeções de plugins a partir dos composables:

composables/test.ts

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

Como os Arquivos São Escaneados

O Nuxt apenas escaneia arquivos no nível superior do diretório composables/, por exemplo:

Estrutura de Diretórios

-| composables/
---| index.ts     // escaneado
---| useFoo.ts    // escaneado
---| nested/
-----| utils.ts   // não escaneado

Apenas composables/index.ts e composables/useFoo.ts seriam pesquisados para importações.

Para que as importações automáticas funcionem para módulos aninhados, você pode reexportá-los (recomendado) ou configurar o scanner para incluir diretórios aninhados:

Exemplo: Reexporte os composables que você precisa do arquivo composables/index.ts:

composables/index.ts

// Habilita a importação automática para esta exportação
export { utils } from './nested/utils.ts'

Exemplo: Escaneie diretórios aninhados dentro da pasta composables/:

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    dirs: [
      // Escaneia composables de nível superior
      '~/composables',
      // ... ou escaneia composables aninhados um nível profundo com um nome específico e extensão de arquivo
      '~/composables/*/index.{ts,js,mjs,mts}',
      // ... ou escaneia todos os composables dentro do diretório dado
      '~/composables/**'
    ]
  }
})

※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.

A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/guide/directory-structure/composables