などの疑問や悩みを解決してまいります。
VuetifyとはJavaScriptフレームワークであるVue.jsに対応している、UIライブラリです。
Googleによって提唱されているマテリアルデザインを簡単に実装することができます。
新規で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もしくは
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です。
