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

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

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

• Release v2.16.2 · nuxt/nuxt

Vue2.7について

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

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

• Vue 2.7 "Naruto" Released | The Vue Point

• できるようになること

  • Composition API
  • SFC <script setup>
  • SFC CSS v-bind
  • defineComponent()の型推論が向上
  • h()/useSlot()/useAttrs()/useCssModules()
  • set()/del()/nextTick()のESM対応版
• 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"

• Migrate to Bridge: Overview

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
   }

• Vue Language Features (Volar) - Visual Studio Marketplace

---

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