Chargement

Nuxt fournit sa propre barre de chargement lors de la navigation entre les routes. Nous pouvons la personnaliser, la désactiver ou même créer la notre.

Personnaliser la barre de progression

Parmi les propriétés que nous pouvons modifier, on peut lister la couleur, la taille, la durée et la direction de la barre de progression, cela afin de correspondre aux besoins de notre application. Cela peut être fait en mettant à jour la propriété loading du fichier nuxt.config.js avec les propriétés correspondantes (color, size, duration, direction).

Par exemple, pour définir une barre de progression bleue d'une hauteur de 5 pixels, nous pouvons mettre à jour le fichier nuxt.config.js avec:

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

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

Désactiver la barre de progression

Si nous ne voulons pas afficher la barre de progression entre les routes, il suffit d'ajouter loading: false à notre fichier nuxt.config.js:

export default {
  loading: false
}

La propriété loading nous donne l'option de désactiver la barre de progression sur une page spécifique.

<template>
  <h1>Ma page</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>

Lancer la barre de progression de manière programmatique

La barre de progression peut aussi être lancée de manière programmatique dans nos composants en appelant this.$nuxt.$loading.start() pour lancer le chargement et this.$nuxt.$loading.finish() pour le finir.

Durant le process de montage du composant page, la propriété $loading peut ne pas être immédiatement accessible. Pour remédier à cette problématique et nous permettre de commencer la progression dans la méthode mounted, il faut enrouler notre méthode $loading dans un this.$nextTick comme montré ci-dessous:

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

Les rouages de la barre de progression

Malheureusement, il n'est pas possible pour le composant de chargement de connaître en avance le temps que va mettre une page pour charger. Ainsi, il n'est pas possible d'animer la barre de progression de manière adéquate pour correspondre au temps de chargement.

Le composant de chargement de Nuxt résout ce problème en nous laissant la possibilité de définir une durée (duration), nous permettant de définir une estimation de la durée de chargement que cela devrait prendre. À moins que nous n'utilisions un composant de chargement personnalisé, la barre de progression ira toujours de 0 à 100% de la durée (duration), peu importe la progression actuelle. Lorsque le chargement réel prend plus de temps que la durée définie, la barre de progression va rester à 100% jusqu'à ce que le chargement soit fini.

Nous pouvons changer le comportement par défaut en passant la propriété continuous à true. Ainsi, la barre de progression reviendra à 0% de nouveau, après avoir atteint les 100%. L'animation va se répéter (de 0 à 100%) jusqu'à ce que le chargement ne soit fini.

export default {
  loading: {
    continuous: true
  }
}

Exemple d'une barre de progression continue:

Utiliser un composant de chargement personnalisé

Nous pouvons aussi créer notre propre composant que Nuxt se chargera d'appeler au lieu d'utiliser celui par défaut. Pour ce faire, nous aurons besoin de spécifier le chemin de du composant dans l'option loading.

Notre composant devra fournir certaines des méthodes suivantes:

Nous pouvons créer notre composant personnalisé dans components/LoadingBar.vue:

<template>
  <div v-if="loading" class="loading-page">
    <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>

Ensuite, il faut mettre à jour le fichier nuxt.config.js pour dire à Nuxt d'utiliser notre composant:

export default {
  loading: '~/components/LoadingBar.vue'
}

La propriété du tourniquet de chargement

Lorsque nous utilisons Nuxt en mode SPA, il n'y a pas de contenu provenant du serveur lors du premier chargement de la page. Ainsi, au lieu d'afficher une page vide pendant que la page charge, Nuxt nous permet d'utiliser un tourniquet que nous pouvons personnaliser afin d'ajouter nos propres couleurs, notre background et même changer le tourniquet lui même.

export default {
  loadingIndicator: {
    name: 'circle',
    color: '#3B8070',
    background: 'white'
  }
}

Tourniquets intégrés

Ces tourniquets sont importés depuis le projet génial qu'est Spinkit . Nous pouvons regarder la page de démonstration pour avoir un aperçu des tourniquets disponibles. Afin d'utiliser l'un des tourniquets, tout ce nous avons à faire est d'ajouter son nom à la propriété name. Pas besoin d'importer ou d'installer quoi que ce soit. Voici la liste de tous les tourniquets intégrés que nous pouvons utiliser:

• circle
• cube-grid
• fading-circle
• folding-cube
• chasing-dots
• nuxt
• pulse
• rectangle-bounce
• rotating-plane
• three-bounce
• wandering-cubes

Les tourniquets intégrés supportent les options color et background.

Tourniquets personnalisés

Si nous souhaitons avoir notre propre tourniquet, une chaîne de caractères ou un nom peuvent aussi être un chemin vers un template de tourniquet. Toutes les options seront ainsi passées au template.

Si nous voulons nous inspirer du tourniquet de base de Nuxt, nous pouvons retrouver le code ici !