この記事の執筆時点で、Vue 3 に対応した Vuetify はまだアルファ版です。
https://vuetifyjs.com/ja/introduction/roadmap/
リリース目標は 2021 年の Q3 らしいですが、待ちきれないので、現時点で公開されているアルファ版を入れてみました。
単純に add するだけ
すでに vue-cli で Vue 3 のプロジェクトがある前提で、次のコマンドを実行します。
$ docker-compose run vue vue add vuetify
ちなみに、上記コマンドの意味は**「docker-compose.yml でサービス名が『vue』と定義されたコンテナに『vue add vuetify』というコマンドを実行させる」**です。
(なので「vue vue」と重複しているのは typo ではありません)
実行すると「どの vuetify を入れるんだよ😒」と聞かれるので「V3 (alpha)」を選択します。
すると、、、
? Choose a preset: V3 (alpha)
🚀 Invoking generator for vue-cli-plugin-vuetify...
📦 Installing additional dependencies...
added 3 packages in 8s
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
vuetify Discord community: https://community.vuetifyjs.com
vuetify Github: https://github.com/vuetifyjs/vuetify
vuetify Support Vuetify: https://github.com/sponsors/johnleider
……と追加完了します。
確認
package.json
を確認すると、vuetify 3 のアルファ版が追加されています。
"dependencies": {
"@mdi/font": "5.9.55",
"core-js": "^3.6.5",
"roboto-fontface": "*",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuetify": "^3.0.0-alpha.0", // ←追加されてる
"vuex": "^4.0.0-0"
},
それから、ちょいちょいファイルが書き変わってますね。
こんな感じで。
import { createApp } from 'vue'
import vuetify from './plugins/vuetify' // ←追加
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(router)
app.use(store)
app.use(vuetify) // ←追加
app.mount('#app')
うーん、それにしても、入れたはいいが使い方がよく分からん😂