Vue CLIでVuetifyを使う方法(Vue2とVue3)｜インストールできないエラー対処法：Error: You cannot call “get” on a collection with no paths. Instead, check the “length” property first to verify at least 1 path exists.

vue-js-prograshi（プロぐらし）-kv Vue.js
記事内に広告が含まれていることがあります。

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を作成するときに、Vue２と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には対応していないという場合が発生します。

項目vue2vue3
公開20162020

Vue2かVue3かの見分け方

Vue２かVue３を見分ける方法に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で構築したプロジェクトがVue２の場合は、プロジェクトのあるディレクトリで以下を実行します。

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の画面が表示されます。

ファイルやディレクトリ構成はVue２とVue３で大きく変わらないので、自分が足したり変更したファイルの内容をコピペします。


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でエラーが出てコケました。

結論

エラーが発生してコケる場合は、VueCLIでVue2のプロジェクトを新規作成しなおし、そこでvue add vuetifyを実行してください。

必要なファイルはVue3プロジェクトからVue2へコピペで移管するのが、現状の最善策のようです。


実例

$ 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を実行することができませんでした。

タイトルとURLをコピーしました