【気持ちいいページ遷移】NProgress を Nuxt3 で使う

このサイト Zenn にも使われているページ遷移用プログレスバー、NProgress を Nuxt 3 で使ってみましょう！

https://ricostacruz.com/nprogress/

やり方

1. インストールする

$ yarn add --dev nprogress

2. 全ページに適用する

Nuxt 3 より追加された最上位のページ構成ファイル /app.vue に、NProgress を追加していきます。これにより、全ページにて NProgress が使えるようになります。

/app.vue

<script setup>
import NProgress from "nprogress";
import "nprogress/nprogress.css";

const router = useRouter();

NProgress.configure({
    /* config はココで設定 */
    showSpinner: false
});

router.beforeEach(() => {
    NProgress.start();
});

router.afterEach(() => {
    // あんまり素早く消えても不自然なので若干遅延を入れると Good
    setTimeout(() => {
        NProgress.done();
    }, 100);
});
</script>

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

<style>
/* NProgress の色設定はココで */
#nprogress .bar {
    background: #3ea8ff
}
</style>

【おまけ】なぜ NProgress なのか？

簡単な話です：NProgress の動作が個人的に非常に気持ちよかったためです。

とはいえ、NProgress だけに限らず、ページ遷移時のプログレスバーの存在は、裏で何かをやっている感が演出されるため、ユーザーへの配慮という面でも最適なものです。

みなさんもデモサイトや Zenn の遷移時に確認してみてくださいね。