Nuxt.js 3.x 自訂 Loading 效果

Nuxt3 ｜ 2023-08-24

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Nuxt3 提供了預設進度條元件 <NuxtLoadingIndicator>，在路徑切換時顯示。也可以自訂共用元件來調整觸發時機或樣式。

方法一：

Nuxt3 內建元件，在頁面切換時觸發

使用方式：

在 app.vue 或是 layouts 加上 <NuxtLoadingIndicator>

Props 選項：

color：loading bar 顏色，預設為漸層色
height：loading bar 高度，預設 3（px）
duration：loading bar 持續時間，預設 2000（毫秒）
throttle：節流時間，會隱藏 loading bar，預設 200（毫秒）

// app.vue
<template>
  <div>
    <NuxtLoadingIndicator :throttle="0" />
    <NuxtPage />
  </div>
</template>

注意：Nuxt ≥ 3.1.0 需加上 :throttle="0"，否則受節流時間影響看不到 loading 效果（參考討論串）

方法二：自訂 Loading Indicator

建立 Loading 元件，使用參數 isLoading 判斷是否顯示 Loading Indicator，接著透過 Nuxt app runtime hooks 建立攔截器，這裡使用 page:start 以及 page:finish

// components/CustomLoadingIndicator.vue
<template>
  <div class="loading-indicator" :class="{ 'show': isLoading }">
    Loading...
  </div>
</template>

<script setup>
  const nuxtApp = useNuxtApp();
  const isLoading = ref(false);

  nuxtApp.hook('page:start', () => {
    isLoading.value = true;
  });

  nuxtApp.hook('page:finish', () => {
    setTimeout(() => {
      isLoading.value = false;
    }, 200);
  });
</script>

<style lang="scss" scoped>
.loading-indicator {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  &.show {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
  }
}
</style>

在 app.vue 加入自訂元件

// app.vue
<template>
  <div>
    <CustomLoadingIndicator />
    <NuxtPage />
  </div>
</template>

效果如下：

資料請求（Data Fetching）Loading

使用 useFetch 或 useAsyncData Composables，參數 pending 為布林值，顯示資料是否還在請求狀態，用來判斷是否顯示 Loading Indicator

Nuxt3 useFetch 相關知識，可以參考這篇文章

// pages/about.vue
<template>
  <div>
    <div v-if="pending">
      Loading ...
    </div>
    <div v-else>
      user: <pre>{{ data }}<pre>
      <button type="button" @click="refresh()">refresh</button>
    </div>
  </div>
</template>

<script setup>
const { data, pending, refresh } = useFetch('/api/about');
</script>

效果如下：

參考資源：

https://medium.com/@flanker72/nuxt3-complex-solutions-page-loading-indicator-e34b5a86be52
https://nuxt.com/docs/api/components/nuxt-loading-indicator
https://nuxt.com/docs/getting-started/data-fetching

#nuxt3

Nuxt.js 3.x 自訂 Loading 效果

路由切換（Page Navigation）Loading

方法一：

方法二：自訂 Loading Indicator

資料請求（Data Fetching）Loading

評論

Your browser is out-of-date!