[Vue 2\.7 "Naruto" Released \| The Vue Point](https://blog.vuejs.org/posts/vue-2-7-naruto.html) を参考に。
## 経緯
[[script setup]]が使いたかったので[[Nuxt Bridge]]への移行にチャレンジしたことがある。
- [[📜Electron x Nuxt Bridge x TypeScript x Element UI x Sqliteなプロジェクトベースを作ってみる]]
少々特殊な環境ということもあり、この対応は失敗に終わった。[[Electron]]のビルドをするため、[[Nuxt2]]のAPIに踏み込んでまで処理をしているところが[[Nuxt Bridge]]への移行を困難にしていた。
代わりに[[Electron]]のバージョンだけでも最新にアップデートしてみることにした。苦戦したがこれは成功した。詳しくは以下。
- [[📝Nuxt2 x TypeScript x SQLiteのプロジェクトでElectronをv7からv19へメジャーバージョンアップした際のハマリポイント]]
そしてこのたび[[Vue 2.7]]がリリースされ、[[バックポート]]として[[script setup]]が含まれるためチャレンジしてみた。[[Nuxi]]を使わずとも利用できそうなため、先の問題点をクリアできそうだから。
## 前提
[[Windows 10]]。対応前の主なパッケージバージョンは以下。
| パッケージ | バージョン |
| ---------------------------------------------- | ---------- |
| [[Nuxt.js]] | 2.15.8 |
| [[Vue]] | 2.6.14 |
| [[Electron]] | 19.0.1 |
| [[TypeScript]] | 4.7.2 |
| [[webpack]] | 4.46.0 |
| [[@vue composition-api\|@vue/composition-api]] | 1.6.2 |
- 記法は[[Class API]]、[[Composition API]]のみ ([[Options API]]は使っていない)
- スタイルは[[CSS]]のみ ([[PostCSS]]などは使っていない)
## [[Vue]]のバージョンアップ
```console
npm i vue@^2.7 vue-server-renderer@^2.7
```
## 不要パッケージの削除
```console
npm uninstall vue-template-compiler @vue/composition-api
```
## 必要なパッケージの追加
```console
npm i -D vue-loader@^15.10.0
```
依存関係でエラーに。
```
npm ERR! Found:
[email protected]
npm ERR! node_modules/webpack
npm ERR! dev webpack@"^4.46.0" from the root project
npm ERR! peer webpack@"^3.0.0 || ^4.1.0 || ^5.0.0-0" from
[email protected]
npm ERR! node_modules/vue-loader
npm ERR! vue-loader@"15.10.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from
[email protected]
npm ERR! node_modules/css-loader
npm ERR! peer css-loader@"*" from
[email protected]
npm ERR! node_modules/vue-loader
npm ERR! vue-loader@"15.10.0" from the root project
```
- [[webpack]]は`v4.46.0`
- [[vue-loader]]の[[peer dependencies]]は`^4.1.0`を受け付けるので`v4.46.0`でok
- 今は[[css-loader]]は`v4.3.0`
- [[css-loader]]の`v6.7.1`では[[webpack]]`^5.0.0`が求められる
- [[webpack]]の`v4.46.0`は使えない
- [[vue-loader]]の[[peer dependencies]]では[[css-loader]]は`*`
- そのため最新である`v6.7.1`がインストールされた
- [[css-loader]]をバージョン指定すれば多分いける
- [[webpack4]]がサポート対象外となったのは [refactor: next by cap\-Bernardito · Pull Request \#1295 · webpack\-contrib/css\-loader](https://github.com/webpack-contrib/css-loader/pull/1295) の対応から
- [[webpack5]]にした方が早い気もするが...
- [v6.0.0](https://github.com/webpack-contrib/css-loader/releases/tag/v6.0.0) で対応入ったので v5系にすればいけそう
```console
npm i -D css-loader@^5.2.7
npm i -D vue-loader@^15.10.0
```
[[Composition API]]については、[[@vue composition-api|@vue/composition-api]]の代わりに[[vue-demi]]を使う。
```console
npm i vue-demi@^0.13.1
```
## ビルドしてトライ&エラー
とりあえずビルドしてみる。当たり前だが[[@vue composition-api|@vue/composition-api]]を使っていた箇所で大量にエラーが出た。`import`元を`vue`に変える。
```diff
- import { defineComponent, reactive, watch } from '@vue/composition-api';
+ import { defineComponent, reactive, watch } from 'vue';
```
これで画面は表示される。
### `root`が存在しないエラー
```
TS2339: Property 'root' does not exist on type 'SetupContext<{}>'.
257 | },
> 258 | setup(props, { emit, root }) {
| ^^^^
```
`SetupContext`から`root`が消えたのは[仕様どおり](https://github.com/vuejs/core/issues/1056)。代わりに[getCurrentInstance()を使う](https://github.com/vuejs/core/issues/1056#issuecomment-659318903)。
```diff
+ import { getCurrentInstance } from 'vue';
// 中略
- setup(props, { emit, root }) {
+ setup(props, { emit }) {
+ const root = getCurrentInstance()?.proxy!
// 中略
}
```
## [[script setup]]を試す
[[IntelliJ IDEA]]を使って試したところ問題なく動作した。
## パッケージング
普通にpackagingも成功。
## 参考
- [Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？ \- Qiita](https://qiita.com/tmy/items/a545e44100247c364a71)