Ajouter un chargeur de page à votre application Nuxt 3 : un guide étape par étape

Question

Je crée une application en utilisant Nuxt 3 et je souhaite ajouter un chargeur de page jusqu'au chargement du site Web.

Answer 1

Basé sur cet article. Il existe une solution simple mais limitée et une solution entièrement personnalisée.

Intégré

Contient une barre de progression de chargement qui peut être utilisée comme ceci

<template>
  <NuxtLayout>
    <NuxtLoadingIndicator />
    <NuxtPage />
  <NuxtLayout>
</template>

Mais il ne dispose que d'une interface utilisateur prédéfinie et ne peut être personnalisé qu'à l'aide de ces quelques propriétés

• Couleur : La couleur de la barre de chargement.
• Hauteur : Hauteur de la barre de chargement en pixels (la valeur par défaut est 3).
• Durée : Durée de la barre de chargement en millisecondes (la valeur par défaut est 2000).
• Limite : Limite d'affichage et de masquage en millisecondes (200 par défaut).

Chargeur personnalisable

Si vous avez besoin d'un chargeur personnalisé (comme un spinner plein écran avec arrière-plan), une approche différente est requise. Cette approche vous permet de créer n'importe quel chargeur et de l'afficher en cas de besoin.

<template>
  <div class="h-screen">
    <div v-if="loading" class="fixed left-0 top-0 h-0.5 w-full z-50 bg-green-500" />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
  const nuxtApp = useNuxtApp();
  const loading = ref(false);
  nuxtApp.hook("page:start", () => {
    loading.value = true;
  });
  nuxtApp.hook("page:finish", () => {
    loading.value = false;
  });
</script>

Nuxt3 fournit des hooks d'exécution d'application qui contiennent des intercepteurs pour les événements page:start 和 page:finish. Pour les utiliser correctement, vous devez utiliser ces hooks (dans app.vue ou votre composant personnalisé) de cette façon :