layouts

Les layouts sont d'une grande aide lorsque vous souhaitez modifier l'aspect et la présentation de votre application Nuxt. Vous pouvez inclure une barre latérale ou avoir des pages différentes entre une version mobile et web.

Layout par défaut

Vous pouvez étendre la présentation principale en ajoutant un fichier layout/default.vue. Il sera utilisé pour toutes les pages qui n'ont pas de layout défini. Assurez-vous d'ajouter le composant <Nuxt> lors de la création d'un layout pour inclure le composant de la page.

Tout ce dont vous avez besoin dans votre layout, c'est de ces trois lignes de code qui effectueront le rendu du composant de la page.

<template>
  <Nuxt />
</template>

Vous pouvez ajouter ici d'autres éléments tels que : Navigation, Header, Footer etc.

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

Layout personnalisé

Tous les fichiers du répertoire layouts créeront un layout personnalisé accessible avec la propriété layout dans les composants de la page.

Disons que nous voulons créer un layout de blog et le sauvegarder sous layouts/blog.vue:

<template>
  <div>
    <div>La barre de navigation de mon blog ici</div>
    <Nuxt />
  </div>
</template>

Ensuite, vous devez indiquer aux pages d'utiliser votre layout personnalisé

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

Page d'erreur

La page d'erreur est un composant (page component) qui est toujours affiché lorsqu'une erreur se produit (qui ne s'est pas lancée du côté du serveur).

Comme mentionné ci-dessus, ce layout est spécial et vous ne devez pas inclure <Nuxt> dans son modèle. Vous devez voir ce layout comme un composant affiché lorsqu'une erreur se produit (404, 500, etc.). Comme pour les autres composants de la page, vous pouvez également définir un layout personnalisé pour la page d'erreur de la manière habituelle.

Vous pouvez personnaliser la page d'erreur en ajoutant un fichier layouts/error.vue :

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page non trouvée</h1>
    <h1 v-else>Une erreur est survenue</h1>
    <NuxtLink to="/">Page d'accueil</NuxtLink>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // vous pouvez customiser l'affichage pour une page d'erreur
}
</script>