O Nuxt auto-importa componentes, composables e APIs do Vue.js para serem usados em toda a sua aplicação sem a necessidade de importá-los explicitamente.

const count = ref(1) // ref é auto-importado

Graças à sua estrutura de diretórios opinativa, o Nuxt pode auto-importar seus components/, composables/ e utils/.

Ao contrário de uma declaração global clássica, o Nuxt preserva tipagens, autocompletes e dicas em IDEs, e inclui apenas o que é usado no seu código de produção.

Auto-importações Embutidas

O Nuxt auto-importa funções e composables para realizar busca de dados, acessar o contexto do aplicativo e configuração de runtime, gerenciar estado ou definir componentes e plugins.

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

O Vue expõe APIs de Reatividade como ref ou computed, bem como hooks de ciclo de vida e auxiliares que são auto-importados pelo Nuxt.

/* ref() e computed() são auto-importados */
const count = ref(1)
const double = computed(() => count.value * 2)

Composables do Vue e Nuxt

Ao usar os composables da API de Composição embutidos fornecidos pelo Vue e Nuxt, esteja ciente de que muitos deles dependem de serem chamados no contexto correto.

Durante o ciclo de vida de um componente, o Vue rastreia a instância temporária do componente atual (e de forma semelhante, o Nuxt rastreia uma instância temporária do nuxtApp) através de uma variável global, e então a desfaz no mesmo tick. Isso é essencial ao renderizar no servidor, tanto para evitar a poluição de estado entre requisições (vazamento de uma referência compartilhada entre dois usuários) quanto para evitar vazamentos entre diferentes componentes.

Isso significa que (com pouquíssimas exceções) você não pode usá-los fora de um plugin Nuxt, middleware de rota Nuxt ou função de configuração do Vue. Além disso, você deve usá-los de forma síncrona - ou seja, você não pode usar await antes de chamar um composable, exceto dentro de blocos <script setup>, dentro da função de configuração de um componente declarado com defineNuxtComponent, em defineNuxtPlugin ou em defineNuxtRouteMiddleware, onde realizamos uma transformação para manter o contexto síncrono mesmo após o await.

Se você receber uma mensagem de erro como Nuxt instance is unavailable, provavelmente significa que você está chamando um composable do Nuxt no lugar errado no ciclo de vida do Vue ou Nuxt.

Exemplo de código quebrado:

// tentando acessar a configuração de runtime fora de um composable
const config = useRuntimeConfig()

export const useMyComposable = () => {
  // acessando a configuração de runtime aqui
}

Exemplo de código funcionando:

export const useMyComposable = () => {
  // Porque seu composable é chamado no lugar certo no ciclo de vida,
  // useRuntimeConfig funcionará aqui
  const config = useRuntimeConfig()

  // ...
}

Auto-importações Baseadas em Diretório

O Nuxt auto-importa diretamente arquivos criados em diretórios definidos:

• components/ para componentes Vue.
• composables/ para composables Vue.
• utils/ para funções auxiliares e outras utilidades.

Importações Explícitas

O Nuxt expõe cada auto-importação com o alias #imports que pode ser usado para tornar a importação explícita, se necessário:

import { ref, computed } from '#imports'

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

Desativando Auto-importações

Se você quiser desativar a auto-importação de composables e utilitários, pode definir imports.autoImport como false no arquivo nuxt.config.

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

Isso desativará completamente as auto-importações, mas ainda é possível usar importações explícitas de #imports.

Desativando Parcialmente Auto-importações

Se você quiser que funções específicas do framework, como ref, continuem sendo auto-importadas, mas deseja desativar auto-importações para seu próprio código (por exemplo, composables personalizados), pode definir a opção imports.scan como false no seu arquivo nuxt.config.ts:

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

Com esta configuração:

• Funções do framework como ref, computed ou watch ainda funcionarão sem a necessidade de importações manuais.
• Código personalizado, como composables, precisará ser importado manualmente em seus arquivos.

Componentes Auto-importados

O Nuxt também importa automaticamente componentes do seu diretório ~/components, embora isso seja configurado separadamente da auto-importação de composables e funções utilitárias.

Para desativar a auto-importação de componentes do seu próprio diretório ~/components, você pode definir components.dirs como um array vazio (embora note que isso não afetará componentes adicionados por módulos).

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

Auto-importação de Pacotes de Terceiros

O Nuxt também permite auto-importação de pacotes de terceiros.

Por exemplo, você poderia habilitar a auto-importação do composable useI18n do pacote vue-i18n assim:

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