在 Nuxt 3 應用程式中新增頁面載入器：逐步指南

Question

我正在使用 Nuxt 3 建立一個應用程序，我想添加一個頁面加載器，直到網站加載。

Answer 1

根據這篇文章。有一個簡單但有限的解決方案和一個完全客製化的解決方案。

內建

包含一個載入進度條，可以像這樣使用

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

但它只有一個預先定義的 UI，並且只能使用這幾個屬性進行自訂

• 顏色：載入欄的顏色。
• 高度：載入欄的高度，以像素為單位（預設值為 3）。
• 持續時間：載入欄的持續時間，以毫秒為單位（預設值為 2000）。
• 限制：限制顯示和隱藏，以毫秒為單位（預設為 200）。

可自訂的載入器

如果您需要自訂載入程式（例如帶有背景的全螢幕旋轉器），則需要不同的方法。這種方法允許您建立任何載入程式並在需要時顯示它。

<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 提供了應用程式運行時掛鉤，其中包含用於 page:start 和 page:finish 事件的攔截器。要正確使用它們，您需要以這種方式使用這些鉤子（在 app.vue 或您的自訂元件中）：