Nuxt3への移行の前段階として、Vue2.7にする方法を調べたときの備忘録(*´ω`*)
以前はnuxt-edge
を使ってたけど、いつのまにかNuxt2.16が出てた(*´ω`*)
Vue2.7について
Vue3で追加された機能のいくつかが使える様になっている。
ある程度、Nuxt2+Vue2.7で書き換えを行ってから、
Nuxt3+Vue3にするのが良さそう。
できるようになること
- 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-levelawait
- テンプレート式の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 }
以上!! これで移行が捗る。。(*´ω`*)