Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Docker 環境で動作する Vue に Vuetify のアルファ版を追加する

Last updated at Posted at 2021-06-10

この記事の執筆時点で、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 のアルファ版が追加されています。

package.json
  "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"
  },

それから、ちょいちょいファイルが書き変わってますね。
こんな感じで。

main.js
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')

うーん、それにしても、入れたはいいが使い方がよく分からん😂

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?