Ativar a Descoberta Automática

Desde a versão v2.13, a Nuxt pode importar automaticamente os nossos componentes quando usados nos nossos modelos de marcação de hipertexto. Para ativar esta funcionalidade, definimos components: true na nossa configuração:

export default {
  components: true
}

Usar Componentes

Depois de criarmos os nossos componentes no diretório de componentes, estes estarão disponíveis em toda a nossa aplicação sem necessidade de os importar:

| components/
--| TheHeader.vue
--| TheFooter.vue

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>

Nomes de Componentes

Se tivermos componentes em diretórios encaixados, tais como:

| components/
--| base/
----| foo/
------| Button.vue

O nome do componente será baseado no seu próprio caminho, diretório e nome de ficheiro. Por conseguinte, o componente será:

<BaseFooButton />

Se quisermos usar uma estrutura de diretório personalizada que não deva fazer parte do nome do componente, podemos especificar explicitamente estes diretórios:

| components/
--| base/
----| foo/
------| Button.vue

components: {
  dirs: [
    '~/components',
    '~/components/base'
  ]
}

E agora no nosso modelo de marcação de hipertexto podemos usar FooButton em vez de BaseFooButton:

<FooButton />

Importações Dinâmicas

Para importar dinamicamente um componente (também conhecido como carregar preguiçosamente um componente), tudo o que precisamos fazer é adicionar o prefixo Lazy ao nome do componente:

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <LazyTheFooter />
  </div>
</template>

Isto é particularmente útil se o componente não for sempre necessário. Ao usar o prefixo Lazy, podemos atrasar o carregamento do código do componente até o momento certo, o que pode ser útil para otimizar o tamanho do nosso pacote de JavaScript:

<template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">Show List</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

Folha de Consulta