Diretório de Componentes

O diretório components contém os nossos componentes .vue. Os componentes constituem as diferentes partes da nossa página e podem ser reutilizados e importados para as nossas páginas, disposições e até para os outros componentes.

Requisição de dados

Para acessar dados assíncronos duma interface de programação de aplicação nos nossos componentes, podemos usar fetch() da Nuxt.

Ao verificar $fetchState.pending, podemos mostrar uma mensagem quando os dados estiverem à espera de serem carregados. Também podemos verificar $fetchState.error e mostrar uma mensagem de erro se houver um erro na obtenção dos dados. Ao utilizar a fetch, devemos declarar as propriedades corretas em data(). Os dados provenientes da obtenção de dados podem então ser atribuídos as estas propriedades:

<template>
  <div>
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching mountains</p>
    <ul v-else>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

Descoberta de Componentes

Desde a versão v2.13, a Nuxt pode importar automaticamente os componentes que usamos. Para ativar esta funcionalidade, definir components: true na nossa configuração:

export default {
  components: true
}

Quaisquer componentes no diretório ~/components podem então ser usados em todas as nossas páginas, disposições (e outros componentes) sem a necessidade de importá-los explicitamente:

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

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

Importações Dinâmicas

Para importar dinamicamente um componente, também conhecido como carregamento preguiçoso de um componente, tudo o que precisamos de fazer é adicionar o prefixo Lazy nos nossos modelos de marcação de hipertexto:

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

Ao utilizar o prefixo lazy, também podemos importar dinamicamente um componente quando um evento é acionado:

<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>

Diretórios Encaixados

Se tivermos componentes em diretórios encaixados tais omo:

components/
  base/
      foo/
         CustomButton.vue

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

<BaseFooCustomButton />

Se quisermos usá-lo como <CustomButton /> mantendo a estrutura de diretório, podemos adicionar o diretório do CustomButton.vue no nuxt.config.js:

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

E agora podemos usar <CustomButton /> em vez de <BaseFooCustomButton />:

<CustomButton />