Nuxt 3 Release Candidate beta já está disponível! Descobre mais sobre isso v3.nuxtjs.org

Translated page Contents of this page might be outdated.

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.


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

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.

layouts/default.vue
<template>
  <Nuxt />
</template>

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

layouts/default.vue
<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>
Se você tiver a propriedade components definida para true então não há necessidade de adicionar qualquer declaração import para os seus componentes.

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:

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

pages/posts.vue
<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).

Embora este ficheiro esteja posto dentro da pasta layouts, ele deve ser tratado como uma página.

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:

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>
O código-fonte da página de erro padrão está disponível no GitHub .
Edit this page on GitHub Updated at Tue, Aug 16, 2022