Vuetify3とMDIのインストール〜導入（NPM使用）

npmを使ってvuetifyをインストールします

Vuefity3をnpmを使ってインストールし、開発に使用します。

この記事のポイント

・npmを使ったインストール方法

・Vuetify3とIconを使う方法

・サンプルコード

インストール方法

まずはvueitfyのインストールとアイコンをインストールします。

vuetify公式ページにも別ページに書かれていますが、mdi icon（アイコン）は別途追加と設定が必要です。

プロジェクト直下で、以下を実行します。

npm install vuetify
npm install @mdi/font -D

package.jsonの"dependencies"に追加されていることを確認します。

これでインストールは完了です。

今回は、pluginで設定したvuetifyをmain.tsでimportする方法をご紹介します。

① src直下にpluginsフォルダを作成し、vuetify.tsファイルを作成します。

vuetify.tsに次のコードを追加します。

② main.tsにはpluginsからvuetifyをimportします。

③ Sample.vue（名前は適当でOK）で早速使ってみましょう。

次のコードを追加します。

追加後、画面の表示を更新しボタンが表示されていればVuetifyの動作確認はOKです。

アイコンも使用できているか確認してみます。

Vuetifyのインストール方法と導入までをご紹介しました。

この記事を参考にVuetifyのUIコンポーネント使ってみてください。