You are ready Nuxt 2 docs. Head over v3.nuxtjs.org for Nuxt 3 docs.
Page traduite Le contenu de cette page peut être déprécié.
Lire la page originale Contribuer à cette traduction

La propriété loading

Nuxt utilise son propre composant pour montrer une barre de progression lors de la navigation entre les routes. On peut le personnaliser, le désactiver ou même créer le notre.

  • Type: Boolean ou Object ou String 
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

Désactiver la barre de progression

  • Type: Boolean
nuxt.config.js
export default {
  loading: false
}

Personnaliser la barre de progression

  • Type: Object 
export default {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

Voici la liste des propriétés que vous pouvez utiliser pour personnaliser la barre de progression.

Propriété Type Défaut Description
color String 'black' Couleur CSS de la barre de progression
failedColor String 'red' Couleur CSS de la barre de progression lors d'une erreur lors du render d'une route (ex: de la data ou un fetch ont échoué).
height String '2px' Hauteur de la barre de progression (utilisé dans la propriété style de la barre de progression)
throttle Number 200 En millisecondes, le temps a attendre avant que la barre de navigation ne soit affichée. Utile pour éviter de créer des flashs.
duration Number 5000 En millisecondes, la durée maximum de la barre de progression, Nuxt assume que la route sera render en moins de 5 secondes.
continuous Boolean false Continuer d'animer la barre de progression lorsque le chargement prends plus de temps que la valeur de la propriété duration.
css Boolean true Définir à false pour enlever tous les styles appliqués à la barre de progression (y compris les vôtres).
rtl Boolean false Définit la direction de la barre de progression, de droite à gauche.

Utiliser un composant de chargement personnalisé

  • Type: String

Votre composant devra fournir certaines des méthodes suivantes:

Méthode Requis Description
start() Requis Appelé lors d'un changement de route, c'est à ce moment là que vous affichez votre composant.
finish() Requis Appelé lorsqu'une route est chargée (et la data collectée), c'est à ce moment là que vous cachez votre composant.
fail(error) Optionnel Appelé lorsqu'une de vos routes n'a pas pu être chargée (ex: le chargement de la data a échoué)
increase(num) Optionnel Appelé durant le chargement du composant de la route, num est un Integer < 100.
components/loading.vue
<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Chargement...</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>

<style scoped>
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 200px;
    font-size: 30px;
    font-family: sans-serif;
  }
</style>
nuxt.config.js
export default {
  loading: '~/components/loading.vue'
}
Editer cette page sur GitHub Mise à jour le jeu. 9 février 2023
Paiva Paiva Florian Reuschel Florian Reuschel Sébastien Chopin Sébastien Chopin Daniel Roe Daniel Roe Rishi Raj Jain Rishi Raj Jain Clément Ollivier Clément Ollivier Savas Vedova Savas Vedova Steven Soekha Steven Soekha Vinícius Alves Vinícius Alves Kareem Dabbeet Kareem Dabbeet Valentín Costa Valentín Costa Ryan Skinner Ryan Skinner Alex Hirzel Alex Hirzel Ajeet Chaulagain Ajeet Chaulagain René Eschke René Eschke Nico Devs Nico Devs Muhammad Muhammad Nazaré da Piedade Nazaré da Piedade Naoki Hamada Naoki Hamada Tom Tom Yann Aufray Yann Aufray Anthony Chu Anthony Chu Nuzhat Minhaz Nuzhat Minhaz Lucas Portet Lucas Portet Richard Schloss Richard Schloss bpy bpy Antony Konstantinidis Antony Konstantinidis Hibariya Hibariya Jose Seabra Jose Seabra Eze Eze Florian LEFEBVRE Florian LEFEBVRE Lucas Recoaro Lucas Recoaro Julien SEIXAS Julien SEIXAS Hugo Hugo Sylvain Marroufin Sylvain Marroufin Spencer Cooley Spencer Cooley Piotr Zatorski Piotr Zatorski Vladimir Semenov Vladimir Semenov Harry Allen Harry Allen kazuya kawaguchi kazuya kawaguchi Unai Mengual Unai Mengual Hyunseung Lee Hyunseung Lee Alexandre Chopin Alexandre Chopin pooya parsa pooya parsa Nick Medrano Nick Medrano Mosaab Emam Mosaab Emam Iljs Путлер Капут Iljs Путлер Капут Heitor Ramon Ribeiro Heitor Ramon Ribeiro Nero Nero Yoon Han Yoon Han Ikko Eltociear Ashimine Ikko Eltociear Ashimine FamCodings FamCodings Ayouli Ayouli F. Hinkelmann F. Hinkelmann felipesuri felipesuri Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Leoš Literák Leoš Literák Trizotti Trizotti