デフォルトの挙動っぽい

どうやらNuxtではページ遷移のときに前のページのスクロール位置を保持するようです。
ブログとかだとそんなのゴミ仕様じゃないですか!!

ってことで解決じゃﾎﾞｹ!!

カスタムプラグインを書く

これを解決するにはプラグインを書くらしいです。プラグインについては公式にドキュメントがあります.

plugins · Nuxt Directory Structure v4

Nuxt has a plugins system to use Vue plugins and more at the creation of your Vue application.

https://nuxt.com/docs/4.x/guide/directory-structure/app/plugins

まずapp/にpluginsディレクトリを作ります。その中にscroll-top.tsみたいに適当な名前のファイルを作ります。

内容は次のようにする。

import { defineNuxtPlugin } from "nuxt/app";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook("page:finish", async () => {
        window.scrollTo({
            top: 0,
            left: 0,
        })
    })
})

内容は単純、ページの読み込みが終わったときに一番上までスクロールするってだけ。

プラグインを使うように設定

あとはnuxt.config.tsを編集して、プラグインを使うようにします。

export default defineNuxtConfig({
    // 他の設定
    plugins: [
        '~/plugins/scroll-top'
    ],
    // 他の設定
})

これでページ遷移したときに一番上にスクロールするようになりました!!

終わり

以上です。Nuxtが多いのはNuxtを勉強しているからですね!!(いうてしてないけど)

タグ機能とかレスポンシブ対応とかやったのでTODOはほぼ無くなりましたね。
ADHDなのでのめり込むと早いですね()

お、終わり～