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.
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:
<template>
<Nuxt />
</template>
Podemos adicionar mais componentes neste exemplo, como Navegação (Navigation
), Cabeçalho (Header
), Rodapé (Footer
), etc:
<template>
<div>
<TheHeader />
<Nuxt />
<TheFooter />
</div>
</template>
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
:
<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:
<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).
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
:
<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>