Zenn
🙄

Vue 2系で<script setup>が使いたくて2.7 betaを試す

2022/06/21に公開
JavaScript
TypeScript
Vue.js
Vue 2
tech

モチベーション

Vue 2は@vue/composition-apiを使ってComposition APIが今までも使えてきた。
だが<script setup>は使えなかった。<script setup>がないと、template側で使うためにはdefineComponent()のsetup()の最後returnまで下にスクロールして、template側に行くためにまた上にスクロールする大変さがあった。

export default defineComponent({
  setup() {
    // ... 長いコード ...
    return {
      // たくさんスクロールしてここに書く...
    };
  }
});

「Vue 2.7 is Now in Beta! | The Vue Point」にて Vue 2.7 betaの発表があり、import { ref } from 'vue'のように書けて、Composition APIはVue本体から提供され、<script setup>にも対応したりESNextがtemplateで利用可能になったりしている。

動くサンプル

再現的に動くサンプルは公開した。npm ciしてからnpm run serveすれば動く。
https://github.com/nwtgck/vue2.7-prac/tree/118ed72584cc0dbc4a863dc37ec80b3cb0cc9242

Vue 2.7 betaに移行する方法

@vue/cli-xxxを~5.0.6か~4.5.18にする。
今回はvue createでまずVue 2.6ベースのシンプルなプロジェクトを作成しており、@vue/cli-xxxは5.0.6になっている。

以下の順番は大事。

overrides設定

package.jsonに以下のように"overrides"を追加する。これはVue CLI v5とnpm >=8.3.0を使っている場合のやり方。Vue CLI v4を使っている場合やyarnを使っている場合は「Vue 2.7 is Now in Beta! | The Vue Point」に説明が書かれている。

{
  ...
  "devDependencies": {
    ...
  },
  "overrides": {
    "@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
  }
}

以下のコマンドで"overrides"を反映する。

npm i

vue@2.7.0-beta.3にアップデート

npmを使っている場合は以下のコマンドでアップデートする。

npm i -S vue@2.7.0-beta.3
npm i -D vue-template-compiler@2.7.0-beta.3

Class Componentと共存できる。<script setup>に移行してシンプルになった。

https://github.com/nwtgck/vue2.7-prac/compare/master...vue-2.7.0-beta.3

上記のdiffは実際に2.7.0-beta.3に移行した時の差分にもなっている。

おまけ: はまったところ

package.jsonの"overrides"の指定はvueのアップデートより先にやる必要があった。
先にvueのアップデートをやってしまうとClass Componentは上手く動くが、<script setup>に書き換えた際に以下のようにエラーした。

[Vue warn]: Unknown custom element: <HelloWorld> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
 
 found in
 
 ---> <App> at src/App.vue
        <Root> vue.runtime.esm.js:572

公式の発表には以下のようにありnpm remove vue-template-compilerして良いように読めるが、削除すると、npm run serveした際に、以下のエラー「Cannot read properties of undefined (reading 'parseComponent'」が出た。そのため削除せずにnpm i -D vue-template-compiler@2.7.0-beta.3をしている。

You can also remove vue-template-compiler from the dependencies - it is no longer needed in 2.7.

以下は実際のエラー。

INFO  Starting development server...
 
 
  ERROR  Failed to compile with 1 error                                                                   6:19:47 AM
 
  error  in ./src/App.vue
 
 Syntax Error: TypeError: Cannot read properties of undefined (reading 'parseComponent')
 
 
 ERROR in ./src/App.vue
 Module Error (from ./node_modules/@vue/vue-loader-v15/lib/index.js):
 
 
 Vue packages version mismatch:
 
 - vue@2.7.0-beta.3 (/Users/.../vue2.7-prac/node_modules/vue/dist/vue.runtime.common.js)
 - vue-template-compiler@2.6.14 (/Users/.../vue2.7-prac/node_modules/vue-template-compiler/package.json)
 
 This may cause things to work incorrectly. Make sure to use the same version for both.
 If you are using vue-loader@>=10.0, simply update vue-template-compiler.
 If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
 
  @ ./src/main.ts 6:0-28 10:13-16

Discussion