Nuxt3のRC版からStable版へのアップグレードに際して気になったことまとめ

Nuxt3

Posted at 2022-12-06

この記事は

メタップスアドベントカレンダー６日目です。

現在Nuxt3を会社でも個人でも使っています。先日Nuxt3.0.0Stable版がリリースされたこともあり、RC版からアップグレードしようとしたところ、結構変更点が多そうだったので、アップグレードする前にRelease Noteを見ながら、自分に関係しそうな変更点を（主観と偏見で）ピックアップしていこうと思います。

*自分の環境のNuxtが3.0.0-rc.4だったのでrc.5以降の変更点から見ていこうと思います。

3.0.0-rc.5からrc.8までの変更

Fetch系関数のkeyが無い場合、ファイル名と行番号から自動的に生成される(rc.5)
error.vueなどで受け取るerrorオブジェクトのstatusCodeの型がStringからNumberに変わる(rc.7)
useHeadの項目にcomputedの値を指定できるようになる(rc.7)
componentsにおいて、some.global.vueのような形でグローバルコンポーネントが登録可能になる(rc.7)
<client-only></client-only>コンポーネントがなくなり、some.client.vueのような形でクライアントのみコンポーネントを登録することになる(rc.7)
titleTemplateを無効化したい場合は未設定(undefined)ではなく、明示的にnullを設定することになる(rc.7)

3.0.0-rc.9からrc.11までの変更

グローバルコンポーネントを手動で読み込むためのpreloadComponents及びそのエイリアスのprefetchComponentsが使用可能に。(rc.9)

// 下記のような形で使用可能
await prefetchComponents('MyGlobalComponent')
await prefetchComponents(['MyGlobalComponent1', 'MyGlobalComponent2'])

navigateToで { external: boolean } optionが利用可能に(rc.9)

navigateTo('https://sample.com') // => Error!
navigateTo('https://sample.com',{external: true}) // => OK

setPageLayout関数が追加(rc.9)
- componentsのscript setup内、plugins,middlewareにおいて使用可能
nuxt generateとssr:true or falseの設定によってindex.htmlや404.htmlの生成が明示的に切り替わるようになる(rc.10)
- 具体的にはssr:falseの時だけ、index.htmlと404.htmlが生成される模様
clearNuxtDataが使用可能に。(rc.10)

Fetch系の関数にimmediateoption(default:true)が追加され、これをfalseにすることでリクエストがすぐに実行されないようにできる。(rc.10)

// 手動でリクエストを実行させるためのexecuteが返り値で受け取れるように。
const {data, error, pending, execute, refresh} = useFetch()

nuxt.config.js(ts)においてimport { defineNuxtConfig } from 'nuxt'が不要に。(rc.10)

3.0.0-rc.12からrc.14までの変更

definePageMeta内でredirect optionとvalidate optionが使用可能に。(どのように活用するのかは要調査。)(rc.12)
nuxt.config.js(ts)`において、ルーティングごとにssrかspaを指定できるように。（この時点ではssrフラグのみの様子。）(rc.12)
```
export default defineNuxtConfig({
    nitro: {
      routes: {
        '/test': { ssr: false }
      }
    }
  })
```

これまでssr:false設定時のnuxi buildでも生成されていたindex.html/404.html/200.htmlがnuxi generateでないと生成されないように。(rc.12)

// 変更箇所を見てみると、、
routes: ([] as string[])
    // - .concat(nuxt.options._generate ? ['/', '/200.html', ...nuxt.options.generate.routes] : [])
    // - .concat(nuxt.options.ssr === false ? ['/index.html', '/200.html', '/404.html'] : [])
    .concat(nuxt.options.generate.routes) // added
    .concat(nuxt.options._generate ? [nuxt.options.ssr ? '/' : '/index.html', '/200.html', '/404.html'] : []) // added

確かに、条件分岐でnuxt.options._generateがtrueでないと生成されないようになっている。

definePageMetaがpagesフォルダ内のみで設定できるように。(rc.13)
useFetchがリアクティブな変数を引数として受け取った時、変数の変更に合わせて自動的にリフェッチするように。(rc.13)
path paramsが変わった時に自動的にページトップにスクロールするように。(query paramsは対象外)(rc.13)
404.vueのサポートがなくなりました。(rc.14)

対応方法
1. 404.vueを[...slug].vueにリネームします
2. [...slug].vue内で手動でsetResponseStatus(404)を使ってエラーを設定、ハンドリングします
```
<script setup>
+   setResponseStatus(404)
</script>
```
useFetchのkeyとしてbaseURLやparamsも含んだフルサイズのURLを使うように。(rc.14)
useFetchのoptionからinitialCacheが削除。(恐らくkeyのみでレスポンスのキャッシュをハンドリングする？)(rc.14)
onBeforeRouteLeaveとonBeforeRouteUpdateが追加（実行タイミングと挙動は要調査）(rc.14)
useAsyncDataからdeferoptionが削除(rc.14)
/utilsフォルダの自動インポートが追加（composableでないユーティリティ関数を置く場所）(rc.14)
- pluginsのprovideとの使い分けはどうなるのか要調査

さいごに

気になった変更点があれば是非、リリースノートからソースコードを参照してみて下さい。
https://github.com/nuxt/framework/releases

個人的には、「useFetchがリアクティブな変数を引数として受け取った時、変数の変更に合わせて自動的にリフェッチするようになる」が一番嬉しい変更でした。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up