Ativando a Descoberta Automática

Desde a versão v2.13, o Nuxt pode importar automaticamente seus componentes sempre que usados nos seus modelos (templates):

export default {
  components: true
}

Usando Componentes

Depois de você criar os seus componentes dentro do diretório de componentes, eles estarão disponíveis em toda a sua aplicação sem a necessidade de importar eles.

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

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

Nomes do Componente

Se você tem componentes dentro de diretórios aninhados tais como:

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

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

<BaseFooButton />

Se você quiser usar uma estrutura de diretório personalizada que não deve fazer parte do nome do componente, você pode explicitamente especificar esses diretórios:

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

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

E agora dentro do seu modelo você pode usar FooButton ao invés de BaseFooButton.

<FooButton />

Importação Dinâmica

Para importar dinamicamente um componente (também conhecido como carregar preguiçosamente (lazy-loading) um componente) tudo que você precisa fazer é adicionar o prefixo Lazy para o componente do nome.

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

Isto é particularmente útil se o componente não é sempre necessário. Ao usar o prefixo Lazy você pode adiar o carregamento do código do componente até o momento correto, o que pode ser útil para otimizar o tamanho do seu pacote 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>

Cheatsheet