📜

Nuxt3でSmoothにページ内リンクにScrollする

2021/12/27に公開

Nuxt 3

tech

目的

ページ内リンクにいい感じにスクロールしたい。
何もしない<a>タグなどで飛ぶと、一度しか飛んでくれないしスクロールしない...

問題

VueやNuxtでのスムーズなページ内リンク遷移を実現するのにはvue-scrolltoがよく使われますが、Vue3やNuxt3には対応していないようでした(2021/12/27現在)。
代わりに、vue3-smooth-scrollというライブラリを使います。

インストール

$ npm install --save vue3-smooth-scroll

セットアップ

Vue3のプラグインを使うために少し設定をします。
pluginsフォルダーの中にプラグインを読み込むためのファイルを追加します。

plugins/vue3-smooth-scroll.ts

import { defineNuxtPlugin } from "#app"
import VueSmoothScroll from "vue3-smooth-scroll"

export default defineNuxtPlugin((nuxtApp) => {
    // 使う
    nuxtApp.vueApp.use(VueSmoothScroll)
})

vue3-smooth-scroll.tsは好きな名前で問題ありません。自分で分かれば良いです。

ここでパラメーターを設定したい時は、

plugins/vue3-smooth-scroll.ts

export default defineNuxtPlugin((nuxtApp) => {
    const config = {
        duration: 500, // アニメーションにかかる時間(ms)
        offset: 0, // スクロールするオフセット(マイナスも可)
        container: "", // スクロール先のセレクタとか要素、デフォルトはwindow
        updateHistory: true, // ハッシュを履歴に残すかどうか(よくわからん)
        easingFunction: null, // イージングのカスタマイズ`t => ...`
        // (https://gist.github.com/gre/1650294 に例がある)
        // 何も指定しなければ `easeInOutCubic` となる
    }
    // 使う
    nuxtApp.vueApp.use(VueSmoothScroll, config)
})

とします。

Nuxt3では自動でpluginsフォルダ内を参照してくれるので、nuxt.config.tsに何かを追記する必要はないです。楽だね。
公式の説明↓

使い方

<template>
	<!-- この`to`はNuxtLinkのパラメーターで`href`とほぼ同じ役割だが、`href`がないとスクロールされないのでちゃんと両方書く -->
	<NuxtLink to="#scroll" href="#scroll">スクロールする</NuxtLink>
			     
	<div id="scroll">スクロール先</div>
</template>
<style scoped>
#scroll {
	margin-top: 1500px;
}
</style>

普通にこんな感じで使えます。
ただ、Next.jsの<Link>タグみたいに<NuxtLink>タグで遷移すべきかどうかはよくわからないです。
(普通に<a>タグを使えばいいのかもしれませんが、なんか統一感がないなーと思ってしまう)

最後に

Nuxt3はまだベータ版なので、この方法が使えなくなったりもっと良い方法が出てくるかもしれません。

GitHubで編集を提案

目的

問題

インストール

セットアップ

使い方

最後に

Discussion