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


# この記事は
メタップスアドベントカレンダー６日目です。

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

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

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

# 3.0.0-rc.9からrc.11までの変更
1. グローバルコンポーネントを手動で読み込むための`preloadComponents`及びそのエイリアスの`prefetchComponents`が使用可能に。(rc.9)
    ```js
    // 下記のような形で使用可能
    await prefetchComponents('MyGlobalComponent')
    await prefetchComponents(['MyGlobalComponent1', 'MyGlobalComponent2'])
    ```
2. navigateToで `{ external: boolean }` optionが利用可能に(rc.9)
    ```js
    navigateTo('https://sample.com') // => Error!
    navigateTo('https://sample.com',{external: true}) // => OK
    ```
3. `setPageLayout`関数が追加(rc.9)
   - componentsのscript setup内、plugins,middlewareにおいて使用可能
4. `nuxt generate`と`ssr:true or false`の設定によって`index.html`や`404.html`の生成が明示的に切り替わるようになる(rc.10)
   - 具体的には`ssr:false`の時だけ、`index.html`と`404.html`が生成される模様
5. clearNuxtDataが使用可能に。(rc.10)
6. Fetch系の関数に`immediateoption(default:true)`が追加され、これをfalseにすることでリクエストがすぐに実行されないようにできる。(rc.10)
    ```js
    // 手動でリクエストを実行させるためのexecuteが返り値で受け取れるように。
    const {data, error, pending, execute, refresh} = useFetch()
    ```
7. `nuxt.config.js(ts)`において`import { defineNuxtConfig } from 'nuxt'`が不要に。(rc.10)

# 3.0.0-rc.12からrc.14までの変更
1. `definePageMeta`内で`redirect` optionと`validate` optionが使用可能に。(どのように活用するのかは要調査。)(rc.12)

2. `nuxt.config.js(ts`)`において、ルーティングごとにssrかspaを指定できるように。（この時点ではssrフラグのみの様子。）(rc.12)
    ```js
    export default defineNuxtConfig({
        nitro: {
          routes: {
            '/test': { ssr: false }
          }
        }
      })
    ```
3. これまでssr:false設定時の`nuxi build`でも生成されていた`index.html/404.html/200.html`が`nuxi generate`でないと生成されないように。(rc.12)
    ```js
    // 変更箇所を見てみると、、
    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`でないと生成されないようになっている。

4. `definePageMeta`がpagesフォルダ内のみで設定できるように。(rc.13)

5. useFetchがリアクティブな変数を引数として受け取った時、変数の変更に合わせて自動的にリフェッチするように。(rc.13)

6. path paramsが変わった時に自動的にページトップにスクロールするように。(query paramsは対象外)(rc.13)

7. 404.vueのサポートがなくなりました。(rc.14)

    **対応方法**
    1. `404.vue`を`[...slug].vue`にリネームします
    2. `[...slug].vue`内で手動で`setResponseStatus(404)`を使ってエラーを設定、ハンドリングします
    ```html
    <script setup>
    +   setResponseStatus(404)
    </script>
   ```
8. useFetchのkeyとしてbaseURLやparamsも含んだフルサイズのURLを使うように。(rc.14)

9. useFetchのoptionからinitialCacheが削除。(恐らくkeyのみでレスポンスのキャッシュをハンドリングする？)(rc.14)

10. `onBeforeRouteLeave`と`onBeforeRouteUpdate`が追加（実行タイミングと挙動は要調査）(rc.14)

11. useAsyncDataから`defer`optionが削除(rc.14)

12. `/utils`フォルダの自動インポートが追加（composableでないユーティリティ関数を置く場所）(rc.14)
    - pluginsのprovideとの使い分けはどうなるのか要調査

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

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