くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt2.15(Vue2.6)からNuxt2.16(Vue2.7)に更新する

Nuxt3への移行の前段階として、Vue2.7にする方法を調べたときの備忘録(*´ω`*)

以前はnuxt-edgeを使ってたけど、いつのまにかNuxt2.16が出てた(*´ω`*)

Vue2.7について

Vue3で追加された機能のいくつかが使える様になっている。

ある程度、Nuxt2+Vue2.7で書き換えを行ってから、
Nuxt3+Vue3にするのが良さそう。

  • Vue 2.7 "Naruto" Released | The Vue Point

  • できるようになること

  • Vue3との違い
    • Vue2の変更検知はそのまま
    • reactive()/ref()/shallowReactive()はただインスタンスを返すだけ
      reactive(foo) === foo // true in 2.7, false in 3.x
    • readonly()/reactive()の変更検知は正確ではない
    • Symbol kyeをもつプロパティはReactivity APIで無視される
  • 使えないもの(明示的に移植されてないもの)
    • createApp()
    • <script setup>でのTop-level await
    • テンプレート式のTypeScript構文
    • Reactivity transform
    • exposeオプション(<script setup>defineExpose()はサポート)

nuxt2.15.x -> nuxt2.16.x

Vue2.6のNuxt2.15から、Vue2.7のNuxt2.16に更新する。
package.jsonを更新して、npm installすればOK

- "nuxt": "^2.15.0"
+ "nuxt": "^2.16.0"

Volarの設定変更

Volarの方の設定も変更が必要。

$ npm rm @vue/runtime-dom
  // tsconfig.json
  {
    "vueCompilerOptions": {
-     "target": 2 // For Vue version <= 2.6.14
+     "target": 2.7 // For Vue version 2.7
   }

以上!! これで移行が捗る。。(*´ω`*)