【Vuetify3】Vuetifyの導入方法について解説します。

なやむくん

Vuetifyの導入方法について知りたい。

なやむさん

既存のVueプロジェクトにVuetifyを導入したい

などの疑問や悩みを解決してまいります。

VuetifyとはJavaScriptフレームワークであるVue.jsに対応している、UIライブラリです。

Googleによって提唱されているマテリアルデザインを簡単に実装することができます。

みつた

Bootstrapのような感じでイメージしてもらえたらなと思います。

新規でVuetifyを使って開発したいということもあれば、元々Vueで作成されたページやアプリケーションをVuetifyに置き換えたいといったこともあるかと思います。

そのような方向けにVuetifyの導入方法について解説していきます。

新規でVuetifyを導入する方法

まずは新規でVuetifyを導入する方法です。

新規というのは最初からVuetifyを導入しつつ、Vueプロジェクトを作成するということです。

まずは使用しているエディタでターミナルを開きます。

ターミナルを開いたら以下のコマンドを入力します。

npm create vuetify

もしくは

yarn create vuetify

コマンドを入力するとインストールが開始します。

その中でプロジェクト名だったりTypescriptを使用するかどうかなどオプションを設定することができます。

みつた

自分の作成するプロジェクトに合わせて設定してください。

インストールが終了するとプロジェクト名に設定した名称のフォルダの中にVueファイルが作成されているかと思います。

これでVue / Vuetifyのファイルのインストールは完了です。

みつた

めちゃめちゃ簡単ですね！

既存のVueファイルにVuetifyを導入する方法

次に既存のプロジェクトがある状態でVuetifyを導入する方法について解説していきます。

まずは導入したいVueファイルが置かれているディレクトリに移動し、そこでターミナルに以下のコマンドを入力してください。

npm install vuetify
もしくは
npm i vuetify

みつた

どちらも同じ意味で、「i」は「install」の略です。

もしくは

yarn add vuetify

するとVuetifyのインストールが開始します。

インストールが終了しましたがこのままではVuetifyを利用することができません。

以下のコードをmain.jsに追加する必要があります。

// Vuetifyのデフォルトのスタイリングが適用
import 'vuetify/styles'
// VuetifyのcreateVuetify関数をインポート
import { createVuetify } from 'vuetify'
// Vuetifyのコンポーネントが使用できる
import * as components from 'vuetify/components'
// Vuetifyのディレクティブが使用できる
import * as directives from 'vuetify/directives'
// インポートしたコンポーネントとディレクティブを設定としてVueインスタンスを生成
const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(vuetify).mount('#app')

これにより既存プロジェクトにおいてもVuetyfyを導入することができました。

試しにVuetifyのコンポーネントを表示させてみましょう。

以下のコードをApp.vueに入力します。

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" app>
    </v-navigation-drawer>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>
  </v-app>
</template>

これはヘッダーナビゲーションのコンポーネントです。

以下のように表示されたかと思います。

アイコンを表示させる

先程のヘッダーコンポーネントですが、本来テキストの左側にハンバーガーメニューのアイコンがあるのですが現在表示されていません。

表示させるためには以下のコマンドをまず入力する必要があります。

npm install @mdi/font

もしくは

yarn add @mdi/font

インストールが終わったらmain.jsに以下コードを追記してください。

import '@mdi/font/css/materialdesignicons.css'

これでMaterial Design Iconsのフォントが追加され、アプリケーション内でこれらのアイコンを使用できるようになります。

ページを再度確認してみましょう。

テキストの左側にハンバーガーメニューのアイコンが表示されたらOKです。