vuetify3の導入

vue3から vue add vuetify をしようとしたけど、エラーで死んだのでvue2から入れて、マイグレーションしていく。

# ここではvue2を選択する。PJ名はvue3だけど
vue create vuetify-vue3
cd !$
# vuetify2を選択
vue add vuetify

しっぽくん

いろいろといらないものをあれこれ削除
4/21現在で最新のv3入れてみる

npm i vuetify@v3.0.0-alpha.2

が、

npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.7" from vuetify@3.0.0-alpha.2

で怒られたので、vue3にするのが先っぽい

しっぽくん

cliで作ったのでコマンドで行けるっぽい?

vue upgrade --next
? Continue to upgrade these plugins? Yes

Upgrading @vue/cli-service from 4.5.12 to 5.0.0-alpha.8
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @vue/cli-service@5.0.0-alpha.8
npm ERR! node_modules/@vue/cli-service
npm ERR!   dev @vue/cli-service@"~5.0.0-alpha.8" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.12
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR!   dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

ばちばちに怒られたので、一個ずつupgradeしてみる

しっぽくん

これはつらい

vue upgrade @vue/cli-service --next
vue upgrade @vue/cli-plugin-babel --next
vue upgrade @vue/cli-plugin-eslint --next
vue upgrade @vue/cli-plugin-router --next
vue upgrade @vue/cli-plugin-typescript --next
vue upgrade @vue/cli-plugin-unit-jest --next
vue upgrade @vue/cli-plugin-vuex --next

しっぽくん

上から順番にやってもだめだったので、やったこと書く

vue upgrade @vue/cli-plugin-babel --next
# eslintのバージョンでこけたので強制的にあげる
npm i -D babel@latest -f
vue upgrade @vue/cli-plugin-eslint --next
vue upgrade @vue/cli-plugin-router --next
vue upgrade @vue/cli-plugin-typescript --next
vue upgrade @vue/cli-plugin-vuex --next
# vue3が必要だったので無理矢理いれる
npm i vue@3 -f
# いろいろ必要だったのでいれる
npm i -D vue-jest@5.0.0-alpha.8
npm i -D ts-jest@26.5.5 -f
vue upgrade @vue/cli-plugin-unit-jest --next
vue upgrade @vue/cli-service --next

しっぽくん

上記だけではだめだったのであれこれupdateした（そもそもpluginのupdate必要だったのか、、、）

npm i vuex@4
npm i vue-router@4

しっぽくん

いろいろやったけど

import { createVuetify } from 'vuetify'

まずこれが読み込めなくて詰んだので撤退。

しっぽくん

Before proceeding, it is important to note that this installation is intended primarily for testing purposes, and should not be considered for production applications.

公式もこういってるし、まだ時期尚早でした。