【Nuxt3】ページ遷移時にローディングアニメーションを表示させる方法

NuxtLoadingIndicator

これをapp.vueに書くだけです。

app.vue

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

ページの遷移時に、上部にローディングバーが出るようになりました。

https://youtu.be/i6eoVXYzAqc

ローディングバーのカスタム

ちなみに、ローディングバーの色や速度をカスタムすることもできます。

• color: 色（デフォルト: 水色、おそらくVuetifyのブランドカラー？）
• height: 高さ（デフォルト: 3）
• duration: 動く速度（デフォルト: 2000）
• throttle: 表示を遅らせる時間（デフォルト: 200）

app.vue

<template>
    <NuxtLayout>
        <NuxtLoadingIndicator
            color="white"
            :height="2"
            :duration="5000"
            :throttle="200"
        />
        <NuxtPage />
    </NuxtLayout>
</template>

上記のように書くとこうなります。

https://youtu.be/Q6avqq2wZ-0

参考

<NuxtLoadingIndicator> · Nuxt Components