Diretório de Disposições

As disposições são uma grande ajuda quando queremos alterar o aspeto e a sensação da nossa aplicação de Nuxt. Quer queiramos incluir uma barra lateral ou ter disposições distintas para telemóvel e computador de ambiente de trabalho.

Este diretório não pode ser renomeado sem configuração adicional.

Disposição Predefinida

Podemos estender a disposição principal ao adicionar um ficheiro layouts/default.vue. Será utilizado para todas as páginas que não tenham uma disposição especificada. Certificamo-nos de adicionar o componente <Nuxt> ao criar uma disposição para incluir efetivamente o componente de página.

Tudo o que precisamos na nossa disposição são três linhas de código que desenharão o componente de página:

layouts/default.vue

<template>
  <Nuxt />
</template>

Podemos adicionar mais componentes neste exemplo, como Navegação (Navigation), Cabeçalho (Header), Rodapé (Footer), etc:

layouts/default.vue

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

Se tivermos a propriedade components definida como true , então não existe necessidade de adicionar nenhuma instrução de importação (import) para os nossos componentes.

Disposição Personalizada

Cada ficheiro (de alto nível) no diretório layouts criará uma disposição personalizada acessível com a propriedade layout nos componentes de página.

Digamos que queremos criar uma disposição de blogue e guardá-la em layouts/blog.vue:

layouts/blog.vue

<template>
  <div>
    <div>My blog navigation bar here</div>
    <Nuxt />
  </div>
</template>

Depois, temos de dizer às páginas para utilizarem a nossa disposição personalizada:

pages/posts.vue

<script>
export default {
  layout: 'blog',
  // Ou
  layout (context) {
    return 'blog'
  }
}
</script>

Página de Erro

A página de erro é um componente de página, o qual é sempre apresentado quando ocorre um erro (que não é lançado no lado do servidor).

Embora este ficheiro seja colocado na pasta layouts, deve ser tratado como uma página.

Conforme mencionado acima, esta disposição é especial, e não devemos incluir <Nuxt> dentro do seu modelo de marcação de hipertexto. Devemos ver esta disposição como um componente exibido quando ocorre um erro (404, 500, etc.). À semelhança de outros componentes de página, também podemos definir uma disposição personalizado para a página de erro, da maneira habitual.

Podemos personalizar a página de erro ao adicionar um ficheiro layouts/error.vue:

layouts/error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // podemos definir uma disposição personalizada para a página de erro.
}
</script>