pages

Le répertoire pages contient les vues et les routes de vos applications. Nuxt lit tous les fichiers .vue à l'intérieur de ce répertoire et crée automatiquement la configuration du routeur pour vous.

Chaque composant de Page est un composant Vue mais Nuxt ajoute des attributs et des fonctions spéciales pour rendre le développement de votre application universelle aussi facile que possible.

<template>
  <h1 class="red">Bonjour {{ name }}!</h1>
</template>

<script>
  export default {
    // les propriétés de la page vont ici
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

Pages dynamiques

Les pages dynamiques peuvent être créées lorsque vous ne connaissez pas le nom de la page parce qu'il provient d'une API ou que vous ne voulez pas avoir à créer la même page encore et encore. Pour créer une page dynamique, vous devez ajouter un underscore (_) avant le nom du fichier .vue ou avant le nom du répertoire, si vous souhaitez que le répertoire soit dynamique. Vous pouvez nommer le fichier ou le répertoire comme vous le souhaitez, mais vous devez le faire précéder d'un underscore .

Si nous avons défini un fichier nommé _slug.vue dans notre répertoire pages, nous pouvons accéder à la valeur en utilisant le contexte avec params.slug

<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // En appelant /abc, le slug sera "abc".
      return { slug }
    }
  }
</script>

Si nous avons défini un fichier nommé \_slug.vue dans un répertoire appelé \_book, nous pouvons accéder à la valeur en utilisant le contexte avec params.slug et params.book

<template>
  <h1>{{ this.book }} / {{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const book = params.book
      const slug = params.slug
      return { book, slug }
    }
  }
</script>

Propriétés

asyncData

AsyncData est appelé à chaque fois avant le chargement du composant. Elle peut être asynchrone et reçoit le contexte en argument. L'objet renvoyé sera fusionné avec votre objet de données.

export default {
  asyncData (context) {
    return { name: 'World' }
  }

fetch

Chaque fois que vous avez besoin d'obtenir des données asynchrones, vous pouvez utiliser fetch(). Fetch est appelé côté serveur lors du rendu de la route, et côté client lors de la navigation.

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res =>
        res.json()
      )
    }
  }
</script>

head

Définissez des balises

export default {
  head() {
    // Définit les balises Méta pour cette page
  }
}

layout

Précisez une mise en page définie dans le répertoire des mises en page.

export default {
  layout: 'blog'
}

loading

Si ce paramètre est défini sur false, il empêche une page d'appeler automatiquement this.$nuxt.$loading.finish() lorsque vous l'entrez et this.$nuxt.$loading.start() lorsque vous la quittez, ce qui vous permet de contrôler manuellement le comportement, comme le montre cet exemple .

export default {
  loading: false
}

transition

Définit une transition spécifique pour la page.

export default {
  transition: 'fade'
}

scrollToTop

La propriété scrollToTop vous permet de dire à Nuxt de faire défiler la page vers le haut avant de la rendre. Par défaut, Nuxt fait défiler la page vers le haut lorsque vous allez sur une autre page, mais avec les routes enfant, Nuxt garde la position de défilement. Si vous voulez dire à Nuxt de faire défiler la page vers le haut lors du rendu de votre route fille, mettez scrollToTop à true

export default {
  scrollToTop: true
}

Inversement, vous pouvez aussi régler manuellement scrollToTop à false sur les routes parentes.

Si vous souhaitez remplacer le comportement de défilement par défaut de Nuxt, consultez l'option scrollBehavior .

middleware

Définit le middleware pour cette page qui sera appelé avant le rendu de la page.

export default {
  middleware: 'auth'
}

La propriété watchQuery

Utilisez la propriété WatchQuery pour configurer un observateur (watcher) pour les chaînes de requête. Si les chaînes définies changent, toutes les méthodes du composants (asyncData, fetch, validate, layout, ...) seront appelées. Le watcher est désactivée par défaut pour améliorer les performances.

export default {
  watchQuery: ['page']
}

export default {
  watchQuery: true
}

Vous pouvez également utiliser la fonction watchQuery(newQuery, oldQuery) pour avoir des observateurs plus raffinés.

export default {
  watchQuery(newQuery, oldQuery) {
    // Exécute les méthodes du composants que si l'ancienne chaîne de requête contenait `bar`.
    // et que la nouvelle chaîne de requête contient `foo`.
    return newQuery.foo && oldQuery.bar
  }
}

key

Comme la propriété key qui peut être utilisée sur les composants Vue dans les modèles comme une indication pour le DOM virtuel, cette propriété permet à la valeur de la clé d'être définie à partir de la page elle-même (plutôt que le composant parent).

Par défaut dans Nuxt, cette valeur sera $route.path, ce qui signifie que naviguer vers une route différente assurera la création d'un composant de page propre. Logiquement équivalent à :

<router-view :key="$route.path" />

La propriété peut être une String ou une Function qui prend la route comme premier argument.

Ignorer des pages

Si vous voulez ignorer des pages afin qu'elles ne soient pas généré dans le fichier router.js, alors vous pouvez les ignorer en les préfixant par un -.

Par exemple, pages/-about.vue sera ignorée.

Configuration

Vous pouvez renommer le répertoire pages/ en quelque chose de différent en définissant l'option dir.pages :

export default {
  dir: {
    // Renommer le répertoire `pages` en `routes`.
    pages: 'routes'
  }
}