O diretório layouts

Os esquemas (layouts) são de uma grande ajuda sempre que você quiser mudar a aparência e a emoção da sua aplicação Nuxt. Seja quando você quiser incluir uma barra lateral ou ter um esquema distinto para o mobile e desktop.

O esquema padrão

Você pode estender o esquema principal ao adicionar um ficheiro layouts/default.vue. Ele será usado para todas as páginas que não tiverem um esquema especificado. Certifique-se de adicionar o componente <Nuxt> quando estiver criando um esquema para efetivamente incluir o componente de página.

Todo o que você precisa dentro do seu esquema são três linhas de código que renderizarão o componente da página.

<template>
  <Nuxt />
</template>

Você pode adicionar aqui mais componentes tais como Navegação (Navigation), Cabeçalho (Header), Rodapé (Footer) etc.

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

O esquema personalizado

Todo ficheiro de (alto-nível) dentro do diretório layouts criará um esquema personalizado acessível com a propriedade layout dentro dos componentes da página.

Vamos dizer que queremos criar um esquema de blogue e guardar ele em layouts/blog.vue:

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

Depois você tem de dizer para as páginas usarem o seu esquema personalizado

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

A página de erro

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

Como já foi mencionado acima, este esquema é especial e você não deve incluir o <Nuxt> dentro do seu modelo (template). Você deve ver este esquema como um componente exibido quando um erro ocorre (404, 500 etc). Similar aos outros componentes de página, você pode definir um esquema personalizado para a página de erro.

Você pode personalizar a página de erro ao adicionar um ficheiro 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' // você pode definir um esquema personalizado para a página de erro
}
</script>