Vue CLIでVuetifyを使うには、Vue CLIのプロジェクトの中にvuetifyのパッケージをインストールする必要があります。
ここではその方法について解説しています。
Vue CLIを使ったプロジェクトの構築方法については下記をご参考ください。
【Vue.js】Vue CLIとは何か?Vueの開発環境を簡単に構築|インストールからブラウザ表示までの手順を実例で解説
また、Vue CLIなどでVue3を選択した場合、vuetifyのパッケージインストール時に次のようなエラーが発生することがあります。
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
この時の対処法についてまとめています。
Vue2とVue3の違い
vue create
でVueを作成するときに、Vue2とVue3を選択することができます。
? Please pick a preset:
Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
Vue3とはVue2の後継でスピード、メンテ性などが向上しています。
ただし、初期状態で生成されるコードの記述が大きく異なるので注意が必要です。プラグインがVue2は対応しているけどVue3には対応していないという場合が発生します。
項目 | vue2 | vue3 |
---|---|---|
公開 | 2016 | 2020 |
Vue2かVue3かの見分け方
Vue2かVue3を見分ける方法にsrcディレクトリ直下のmain.jsのファイルの記述内容の確認があります。
Vue3のmain.jsの記述
Vue3の場合は、createAppという名前が使われています。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Vue2のmain.jsの記述
Vue2の場合はnew Vueや、render: h => h(App)という記述があります。
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
Vuetifyのインストール(Vue2の場合)
Vue CLIで構築したプロジェクトがVue2の場合は、プロジェクトのあるディレクトリで以下を実行します。
vue add vuetify
実例
$ vue add vuetify
� Installing vue-cli-plugin-vuetify...
(省略)
✔ Successfully installed plugin: vue-cli-plugin-vuetify
vue-cli-plugin-vuetifyプラグインのインストールが完了すると、セッティングの選択に移ります。
? Choose a preset:
Configure (advanced)
> Default (recommended)
Vite Preview (Vuetify 3 + Vite)
Prototype (rapid development)
Vuetify 3 Preview (Vuetify 3)
基本的には「Default」を選択するので問題ありません。「Default」を選択すると、以下のように表示されvuetifyのインストールが完了します。
⚓ 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
vuetifyに必要なファイルやコードなどが追加されます。
npm run serveを実行すると次のようにVuetifyの画面が表示されます。
以上でVuetifyを使う準備は完了です。
Vuetifyのインストール(Vue3の場合)
vuetify v3がリリースされるまで待つ
Vue CLIで構築したプロジェクトがVue3の場合、残念ながら現時点でvuetifyは対応していません。
どうしてもVue3を使いたい!という方はVuetify v3がリリースされるのを待つ必要があります。
Vuetifyの現在のバージョンはVue 3をサポートしていません。 Vue3に対応する Vuetify v3 がリリース予定です。 新しいプロジェクトを作成する場合は、Vue CLI プロンプトから Vue 2 を選択したか、既存の Vue 2 プロジェクトにインストールすることを確認してください。
https://vuetifyjs.com/ja/getting-started/installation/
どうしても今すぐ使いたい場合
どうしても今すぐVuetifyを使いたい場合は、Vue CLIでVue2を使ったプロジェクトを新たに作成する必要があります。
vue create <プロジェクト名>
上記コマンドを実行し、選択肢で「Default ([Vue 2] babel, eslint)」を選びます。
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
プロジェクトのインストールが終わったら、Vuetifyをインストールします。
$ vue add vuetify
以上でVuetifyが使えるようになります。
npm run serveを実行すると次のようにVuetifyの画面が表示されます。
ファイルやディレクトリ構成はVue2とVue3で大きく変わらないので、自分が足したり変更したファイルの内容をコピペします。
main.jsを書き変えてもダメ
なお、main.jsの記述を以下のように変更すると、vue add vuetify
によるパッケージのインストールやセッティングは完了しますが、ページがロードできないエラーが発生します。
Vue3の記述
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Vue2の記述
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
Vue CLIを使わずに、簡単にVuetifyを試す方法
Vue CLIにこだわらず、Vuetifyを使ってみたいというのであれば、以下のコードを使ってオンラインエディタなどで簡単に試すことができます。
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
</html>
詳細については下記をご参考ください。
Vuetify(ビューティファイ)とは何か?使い方を実例で解説
追記:Vuetifyのインストール(Vue3の場合)
「Vuetify 3 Preview (Vuetify 3)」が選択できるようになったので、Vue CLIで構築したプロジェクトがVue3の場合ルートディレクトリで以下を実行し、
vue add vuetify
「Default (recommended)」ではなく、「Vuetify 3 Preview (Vuetify 3)」を選択してみました。
インストールは完了したものの、npm run serve
でエラーが出てコケました。
実例
$ vue add vuetify
� Installing vue-cli-plugin-vuetify...
(省略)
✔ Successfully installed plugin: vue-cli-plugin-vuetify
vue-cli-plugin-vuetifyプラグインのインストールが完了すると、セッティングの選択に移ります。
ここで「Vuetify 3 Preview (Vuetify 3)」を選択。
? Choose a preset:
Configure (advanced)
Default (recommended)
Vite Preview (Vuetify 3 + Vite)
Prototype (rapid development)
> Vuetify 3 Preview (Vuetify 3)
すると、vuetify 3のインストールが開始します。
? Choose a preset: Vuetify 3 Preview (Vuetify 3)
� Invoking generator for vue-cli-plugin-vuetify...
(省略)
� Installing additional dependencies...
(省略)
⚓ 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
上記のように表示されれば、vuetifyに必要なファイルやコードなどの追加が完了です。
エラーが発生
vuetifyのインストールが完了した後に、npm run serve
でプロジェクトを起動すると、以下のようなエラーが発生することがあります。
$ npm run serve
> vue3-local@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR ValidationError: Progress Plugin Invalid Options
options should NOT have additional properties
options should NOT have additional properties
options should NOT have additional properties
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf
npm update
を実行すれば解決するという記事があったのですが、そもそも依存性の問題でnpm update
を実行することができませんでした。