Menambah pemuat halaman pada aplikasi Nuxt 3 anda: panduan langkah demi langkah

Question

Saya sedang membina aplikasi menggunakan Nuxt 3 dan saya mahu menambah pemuat halaman sehingga laman web dimuatkan.

Answer 1

Berdasarkan artikel ini. Terdapat penyelesaian yang mudah tetapi terhad dan penyelesaian yang disesuaikan sepenuhnya.

Terbina dalam

Mengandungi bar kemajuan pemuatan yang boleh digunakan seperti ini

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

Tetapi ia hanya mempunyai UI yang telah ditetapkan dan hanya boleh disesuaikan menggunakan beberapa sifat ini

• Warna: Warna bar pemuatan.
• Ketinggian: Ketinggian bar pemuatan dalam piksel (lalai ialah 3).
• Tempoh: Tempoh bar pemuatan dalam milisaat (lalai ialah 2000).
• Had: Had menunjukkan dan bersembunyi dalam milisaat (lalai 200).

Pemuat boleh disesuaikan

Jika anda memerlukan pemuat tersuai (seperti pemutar skrin penuh dengan latar belakang), pendekatan berbeza diperlukan. Pendekatan ini membolehkan anda membuat sebarang pemuat dan memaparkannya apabila diperlukan.

<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 menyediakan cangkuk masa jalan aplikasi yang mengandungi pemintas untuk page:start 和 page:finish acara. Untuk menggunakannya dengan betul, anda perlu menggunakan cangkuk ini (dalam app.vue atau komponen tersuai anda) dengan cara ini: