Nuxt 3 Release Candidate is out! Discover more about it on v3.nuxtjs.org

Page traduite Le contenu de cette page peut être déprécié.

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.


Ce répertoire ne peut pas être renommé sans configuration supplémentaire.

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.

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

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

layouts/default.vue
<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>
Si vos composants sont réglés sur true alors il n'est pas nécessaire de déclarer l'importation pour vos composants.

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:

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é

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

Bien que ce fichier soit placé dans le répertoire layouts, il doit être traité comme une page.

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 :

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>
Le code source de la page d'erreur par défaut est disponible sur GitHub .
Editer cette page sur GitHub Mise à jour le mar. 16 août 2022