Zenn
🔖

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

2022/12/06に公開
Nuxt
tech

この記事は

現在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)
    // 下記のような形で使用可能
await prefetchComponents('MyGlobalComponent')
await prefetchComponents(['MyGlobalComponent1', 'MyGlobalComponent2'])
  2. navigateToで { external: boolean } optionが利用可能に(rc.9)
    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)
    // 手動でリクエストを実行させるための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)

    　export default defineNuxtConfig({
    nitro: {
      routes: {
        '/test': { ssr: false }
      }
    }
  })

  3. これまで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でないと生成されないようになっている。

  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)を使ってエラーを設定、ハンドリングします
    　 <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からdeferoptionが削除(rc.14)

  12. /utilsフォルダの自動インポートが追加（composableでないユーティリティ関数を置く場所）(rc.14)

    • pluginsのprovideとの使い分けはどうなるのか要調査

さいごに

気になった変更点があれば是非、リリースノートからソースコードを参照してみて下さい。

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

GitHubで編集を提案

Discussion