Nuxtをrc10から安定版に更新しました

JavaScript

2023-01-01 (Sun)

Nuxt3-rc10からrc14を経由して安定版に更新しましたが、その際に変更になった点でいくつか修正が必要な部分がありましたので、備忘録として残しておこうかと

前提

rc10→rc14→stableの順でアップグレードを行います（別にrc10→stableでやっても問題ないとは思いますが）
変更点をすべてここで記載するつもりはないので、詳細は公式のリリースノートを参照してください

※rc14リリースノート ※安定版リリースノート

rc10→rc14

アップグレードするには npx nuxi upgradeを実行するとrcの状態であれば14まで更新されます（安定版へは自動で行きませんでした）

nuxt.config.ts

Cannot start nuxt: (0 , _nuxt.defineNuxtConfig) is not a function

nuxt.config.tsにはimport { defineNuxtConfig } from 'nuxt';で設定をimportしてますが、こちらは自動importになっており、exportから削除されたためimportできません。記述を削除しましょう。

metaがない

NuxtConfigにmetaプロパティがなくなったようです。

というのも過去記事でnuxt2→nuxt3rcへの移行記事を記載したときにmeta情報がhead: {meta: {}}からmeta: {meta: {}}に変わったと記述しましたが、やはり色々言われたんでしょうね。 app: {head: {meta: {}}}のようになったっぽいです。 meta以外にもこのappに色々格納されてるっぽいですね。

nuxt-config#head

pageTransition

rc10時点では未実装状態でしたが、どうやらrc14では実装されたっぽいです。上記のapp内に記載するようになったようです。

あとnuxt2自体はfrom,toのフェード名って fromはfade-enter, fade-leave、toはfade-enter-to, fade-leave-toだったと思うのですが、nuxt3（正確にはvue3か？）ではfromが変わってfade-enter-from, fade-leave-fromになったようですね。今まで-fromが省略されていたのが明示されるようになったようなので、そこを直せばnuxt2で使っていたトランジションを流用できますね。

このブログではtype: 'transition'で実行しないと流用できなかったです。たぶん独自トランジションをtransitionで作っているかanimationで作っているかで内部処理が変わるのかな？

処理

useFetch

initialCacheオプションがなくなったようです。

fix(nuxt)!: remove initialCache option

ファイル

404.vue

nuxt2では layouts/error.vueで実装されていたのがrc10まで（rc11~13は不明）はpages/404.vueで実装されていた404独自エラーページですが、どうやらrc14時点ではまた仕様が変わったようです。

下記のPRを見て対応しましょう。

refactor(nuxt)!: remove support for 404.vue shorthand

しかしこれは……まぁたしかに理屈にあっているっちゃあってるか。

モジュール側

@nuxtjs/redirect-module

rc10では動きこそしませんでしたが、エラーなく読み込まれてましたが、rc14の時点ではエラーになります。おとなしくミドルウェアでリダイレクトを記載しました

// redirect.global.ts

export default defineNuxtRouteMiddleware((to, from) => {
    const redirects = [
        { from: '^正規表現でマッチさせたいURL', to: '/ルート相対パス', statusCode: 301 },
    ];

    redirects.forEach((redirect) => {
        const regex = new RegExp(redirect.from);
        if (regex.test(to.path)) {
            const option = {
                redirectCode: redirect.statusCode ?? 302,
            };
            return navigateTo(redirect.to, option);
        }
    });
});

rc14→stable

npx nuxi upgradeではなぜかrc14までしか更新してくれないので、再インストしますyarn add nuxt 起動確認したところ、特に問題なさそうなので、rc14経由せずに最初から安定版インストしてやっても良かったかも。

しかしなんで年明け早々にこんなことやっているんだろう……