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

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

https://ricostacruz.com/nprogress/

【2024年5月10日】実装方法を更新しました！

やり方

1. インストールする

$ yarn add --dev nprogress

2. 全ページに適用する

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

/app.vue

<script setup lang="ts">
import NProgress from 'nprogress';
import "nprogress/nprogress.css";

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

router.beforeEach((to, from) => {
    if (to.path === from.path) return;
    if (!NProgress.isStarted()) {
        NProgress.start();
    }
});

nuxtApp.hook('page:loading:end', () => {
    // ↓ DOMの更新が完了するのを待つ
    nextTick(() => {
        // あんまり素早く消えても不自然なので若干遅延を入れると Good
        setTimeout(() => {
            NProgress.done();
        }, 100);
    });
});
</script>

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

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

#nprogress .peg {
    box-shadow: 0 0 10px #3ea8ff, 0 0 5px #3ea8ff;
}
</style>

【2024年5月10日まで掲載していた方法】

/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 の遷移時に確認してみてくださいね。