16
1

More than 1 year has passed since last update.

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

Posted at

この記事は

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

現在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 generatessr:true or falseの設定によってindex.html404.htmlの生成が明示的に切り替わるようになる(rc.10)
    • 具体的にはssr:falseの時だけ、index.html404.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.htmlnuxi 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._generatetrueでないと生成されないようになっている。

  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. onBeforeRouteLeaveonBeforeRouteUpdateが追加(実行タイミングと挙動は要調査)(rc.14)

  11. useAsyncDataからdeferoptionが削除(rc.14)

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

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

さいごに

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

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

16
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
1