【Vue.js】Vuetifyの導入方法や使い方を紹介

2022年6月5日

Vue.jsにはVuetifyというUIライブラリがあるのをご存知でしょうか？

Vuetifyでは綺麗なマテリアルコンポーネントが提供されているので、デザインスキルがないエンジニアでもCSSを書かなくても整ったデザインのアプリケーションを開発するのに役立ちます。

Vuetifyは導入も簡単で、タグを指定するだけで綺麗なデザインのコンポーネントを使用することができるので非常に便利です。

この記事ではVuetifyのインストール方法から使い方まで詳しく解説していきたいと思います。

Vue.jsのプロジェクトにVuetifyをインストールする

では早速Vue.jeプロジェクトを作成して、そのプロジェクトでVuetifyを使用できるようにインストールしていきましょう。

Vuetifyをインストールする方法はnpmやyarn、CDN読み込みなど様々な方法でインストールすることができますが、ここではVue CLIでVue.jsをプロジェクト作成して、Vuetifyもインストールしていきたいと思います。

Vue CLIでVue.jsプロジェクトの作成

まずは下記コマンドでVue.jsのプロジェクトを作成していきましょう。

vue create vuetify-project

プリセットの選択を聞かれるので、ここではVue2を指定してプロジェクトを作成していきましょう。

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) 
❯ Default ([Vue 2] babel, eslint) 
  Manually select features

Vuetifyのインストール

プロジェクトの作成に成功したら、cdコマンドでプロジェクトディレクトリに移動します。

cd vuetify-project

プロジェクトディレクトリに移動したら、下記コマンドでVuetifyをインストールすることができます。

vue add vuetify

ここでもプリセットの選択を聞かれるので、Default(recommended)を選択しましょう。

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

Vuetifyのインストールが完了したら、下記コマンドでサーバーを起動して確認してみましょう。

npm run serve

画面がVuetify仕様になっていますね。

Vuetifyを使ってみよう

それではVue.jsのプロジェクトにVuetifyをインストールすることができたので、実際にVuetifyを使ってみましょう。

今回はサイトナビゲーションを実装しながら、Vuetifyの使い方について学んでいきましょう。

v-appタグ

Vuetifyのコンポーネントを利用するためには、全てのコンポーネントをv-appタグでラップする必要があります。

<template>
  <v-app></v-app>
</template>

<script>
export default {
  name: "App"
};
</script>

v-appタグの中にv-から始まるVuetifyのコンポーネントを記述していきます。

App barsコンポーネント

まずはナビゲーションバーを実装していきます。

ナビゲーションバーを実装するには、App barsコンポーネントを使用します。

<template>
  <v-app>
    <v-app-bar app color="blue" dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>アプリ</v-app-bar-title>
    </v-app-bar>
  </v-app>
</template>

<script>
export default {
  name: "App"
};
</script>

v-app-barタグがApp barsコンポーネントです。

<v-app-bar app color="blue" dark>
  <v-app-bar-nav-icon></v-app-bar-nav-icon>
  <v-app-bar-title>アプリ</v-app-bar-title>
</v-app-bar>

porpsのappを指定すると、CSSのposition: fixedが適用されます。

colorでナビゲーションバーの背景色を青色にしています。また、darkを指定することで、テーマがDarkテーマとなり文字色が白色になります。

また、v-app-barタグの子要素が２つ存在しますね。

v-app-bar-nav-iconタグはハンバーガーメニューのアイコンを表示します。

<v-app-bar-nav-icon></v-app-bar-nav-icon>

v-app-bar-titleタグではナビゲーションバーにタイトルを指定し、表示することができます。

<v-app-bar-title>アプリ</v-app-bar-title>

たったこれだけでナビゲーションバーを実装することができました。

Navigation drawersコンポーネント

それでは続いて、ナビゲーションバーのハンバーガーメニューをクリックした際に、表示されるナビゲーションドロワーを実装していきましょう。

ナビゲーションドロワーの実装には、Navigation drawersコンポーネントを使用します。

<template>
  <v-app>
    <v-app-bar app color="blue" dark>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>アプリ</v-app-bar-title>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" absolute temporary>
      <v-list nav dense>
        <v-list-item-group>
          <v-list-item v-for="item in listItems" :key="item.id">
            <v-list-item-title>{{ item.text }}</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    drawer: false,
    listItems: [
      {
        id: 1,
        text: "foo",
      },
      {
        id: 2,
        text: "bar",
      },
      {
        id: 3,
        text: "fizz",
      },
      {
        id: 4,
        text: "buzz",
      },
    ],
  }),
};
</script>

v-navigation-drawerタグがNavigation drawersコンポーネントです。

<v-navigation-drawer v-model="drawer" absolute temporary>
</v-navigation-drawer>

propsのabsoluteを指定すると、position: absoluteが適用されます。また、temporaryを指定すると、ドロワーがアプリケーション画面の上に重なるように表示させることができます。

v-modelの値にはdataプロパティのdrawerを指定して、ドロワーの開閉状態を管理します。

また、ナビゲーションバーのハンバーガーメニューのアイコンをクリックした時にドロワーが表示されるように実装するため、v-app-bar-nav-iconタグにclickイベントを設定します。

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

ナビゲーションドロワーの中身にはv-listタグでリストコンポーネントを表示するようにしています。

<v-navigation-drawer v-model="drawer" absolute temporary>
  <v-list nav dense>
    <v-list-item-group>
      <v-list-item v-for="item in listItems" :key="item.id">
        <v-list-item-title>{{ item.text }}</v-list-item-title>
      </v-list-item>
    </v-list-item-group>
  </v-list>
</v-navigation-drawer>

これでハンバーガーメニューのアイコンをクリックすることで、ドロワーが表示されるようになり、表示後はドロワーの外をクリックすることでドロワーが非表示になります。