Vuetify3 Betaをインストールしてみた件

コーディングに関する記事
この記事をシェアする:

【tedate owner よりお知らせ】
会員限定記事の配信始めました。ご登録いただくと閲覧が可能になります。
tedate Premium のご紹介
詳しくは、上記URLの記事をご参照ください。

以前、「Vuetify3.0(コードネーム:Titan)はいつ出るのか?」
という記事を書きました。

その記事では「3月予定」とされていた
Vuetify3のベータ版」がリリースされていましたので、
インストール 〜 local環境起動まで試してみました。

手順

Vuetify3 Beta 公式サイトの手順に沿って、各コマンドを実行していきます。

インストールには、VueCLIを使用します。
まず、Vuetify3 Betaが動くとされている @vue/cli のバージョンは 5.0.x 系統とのことですので、
このページを参考にアップグレードもしくは、インストールしておきます(以下は、執筆時点の最新バージョンインストールの例)。

npm install -g @vue/cli@5.0.3

すでに @vue/cli を使用していて、アップグレードする場合は以下。

npm update -g @vue/cli

VueCLIのインストールが済んだら、次のコマンドを実行して新規Vueプロジェクトを作成します(名前はなんでも良いです)。

vue create vuetify-3-beta-sample

次のように聞いてくるので、[Vue 3]を選択してENTERを押します。

? Please pick a preset:
  > Default ([Vue 3] babel, eslint)
    Default ([Vue 2] babel, eslint)
    Manually select features

作成された新規Vueプロジェクトのディレクトリに移動(change directory ≒ cd)します。

cd /Users/(user名)/(対象プロジェクトまでのpath)/vuetify-3-beta-sample

ここまでが、新規Vue 3プロジェクトを作成する手順です。

Vuetifyを追加する

上のセクションまでの手順で、新規Vue 3プロジェクトができました。
では続いて、Vuetify 3 Beta をプロジェクトに追加します。

vue add vuetify

上記を実行すると、次のように聞いてくるので、Vuetify 3 Preview (Vuetify 3) を選択してENTER。

? Choose a preset:
  Configure (advanced)
  Default (recommended)
  Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
> Vuetify 3 Preview (Vuetify 3)

すると次のように聞いてきますが、インストールしてみるのがこの記事の目的なので、 y を入力してENTERします。

? Would you like to install Vuetify 3 nightly build? (WARNING: Nightly builds are intended for development testing and may include bugs or other issues.) (y/N) 

これで、Vuetify 3 Beta を使う手順が整いました。
(ように思われました…詳しくは以下のセクションにて)

公式による説明はここまで。ただし、場合により追加のインストールが必要だったりします

上記セクションまでの手順で、すんなり動く方は
次のコマンドを実行すれば普通にVuetify 3 Betaが動くと思います。
Vuetify公式による解説も、上のセクションまでの手順です。

npm run serve

Error: Cannot find module ‘vuetify/dist/json/importMap.json’ の発生

ただし私の場合、そのままでは

Error: Cannot find module ‘vuetify/dist/json/importMap.json’ Require stack: …

というエラーが発生して、ローカル環境が起動しませんでした。うーん、
importMap.json がない、と言われましても、ねぇ…。

公式手順通りにやっているのに、この手のエラーが出た時のあの感じ。
すんなり動いてほしかった…。

でもまだあきらめません!
解決に至った方法は、以下セクションにて。

vue add vuetify のみでは依存しているファイルがインストールされていなかった

折れかけた心を、かわいい動物の動画を見たりしてなんとか立て直しつつ…

上記のエラーの原因をさぐってみたところ、
node_modules ディレクトリの中に
vuetify という名前のディレクトリが生成されていないことに気がつきました。

というわけで、次のコマンドを追加実行。

npm install vuetify@v3.0.0-beta.0

↑バージョンを指定して、Vuetifyが参照している構成ファイルを直接追加しました。

その上で、npm run serve を実行。

すると、問題なく build が通り、
local環境で Vuetify 3 Beta が動作しました!!
Vuetify 3 Beta をlocal環境に入れた時のデフォルト起動画面キャプチャ

この記事のまとめ

今回は、つい先日リリースされた Vuetify 3 のベータ版、
Vuetify 3 Betaのインストール方法について、公式解説の手順を元に
記事を書いてみました。

ページ中段にも書きましたが、公式通りの手順で問題なく動く方は動くことと思います。

ただし、私と同様にエラーが発生する方もいるかと思いましたので、
私が出くわしたエラーと、その解決方法についてもあわせて記事として書いてみました。参考になれば幸いです。

これで Vuetify 3 Beta を試す環境が整ったので、
今後随時、いろいろ試していきたいと思っています。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。

【tedate owner よりお知らせ】
会員限定記事の配信始めました。ご登録いただくと閲覧が可能になります。
tedate Premium のご紹介
詳しくは、上記URLの記事をご参照ください。

この記事をシェアする: