カテゴリー: FrontEnd

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに
- 1.1 Vuetifyとは
2 Vuetifyを導入する
- 2.1 パッケージを追加する
- 2.2 TypeScriptを採用している場合
3 Vuetifyのコンポーネント
4 さいごに
5 おすすめ書籍

はじめに

フロントエンドの開発を行う場合、 Bootstrap や Materialize などのライブラリを利用することがよくあるのではないかと思います。

今回の記事では、 Vue.js を使った開発でマテリアルデザインを容易に適用できる、 Vuetify というフレームワークの導入から基本的な使い方までを紹介します。

Vuetifyとは

Vuetify はマテリアルデザインが適用された様々な Vue.js のコンポーネントが含まれたフレームワークです。 Vuetify を使用することで、自分でCSSを定義しなくても美しいデザインのWebページを作ることができます。

Vuetifyを導入する

Vuetify の導入には様々なやり方がありますが、今回は Vue Cli 3 以降で作成したプロジェクトに Vuetify を導入する方法を紹介します。それ以外の導入方法については、こちらをご覧ください。

パッケージを追加する

はじめに Vuetify Vue Cli 3 package をプロジェクトに追加します。

$ vue add vuetify

すると、いくつかのパッケージがインストールされ、ファイルの追加、および編集が行われます。

// main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify"; // 追加

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify, // 追加
  render: h => h(App)
}).$mount("#app");

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuetify-sample</title>
    <!-- ここから追加 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <!-- ここまで追加 -->
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuetify-sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

// vue.config.js（新規）
module.exports = {
  transpileDependencies: ["vuetify"]
};

// vuetify.ts（新規）
import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({});

TypeScriptを採用している場合

TypeScript で書いている場合、そのままだとビルドエラーになると思います。そのため、 tsconfig.json の types に vuetify を追加します。

Vuetifyのコンポーネント

Vuetify では様々なコンポーネントが用意されていますが、ここでは一般的に使われるであろうコンポーネントをいくつかピックアップして紹介します。

前提として、 Vuetify のコンポーネントは v-app の中に含める必要があります。

<template>
  <!-- App.vue -->
  <v-app>
    <!-- ここに追加する -->
  </v-app>
</template>

Application

Webページの骨格となるコンポーネント群です。ここには以下のコンポーネントが含まれます。

v-system-bar
v-app-bar
v-navigation-drawer
v-content
v-footer
v-bottom-navigation

これらが画面のどこに表示されるかはこちらをご覧ください。

また、vue-router を導入している場合、 v-content の中に router-view を配置するのが良いようです。

SPA の場合、以下のような構造になると思います。

<template>
  <!-- App.vue -->
  <v-app>
    <v-navigation-drawer app>
      <!-- ナビゲーションメニュー -->
    </v-navigation-drawer>

    <v-app-bar app>
      <!-- ページ名、ハンバーガーボタンなど -->
    </v-app-bar>

    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>

    <v-footer app>
      <!-- フッターメニュー -->
    </v-footer>
  </v-app>
</template>

v-navigation-drawer などの領域のサイズに応じて v-content の領域のサイズを動的に変更したい場合、 v-navigation-drawer などに app を指定し、 v-content の外側に配置する必要があります。

また、こちらに様々なレイアウトのサンプルが用意されています。

Grids

Bootstrap のグリッドシステムを想像してもらうとわかりやすいと思います。 v-row の中に v-col を追加していって、画面を構成します。

<template>
  <!-- grid.vue -->
  <v-container fluid>
    <v-row>
      <v-col>
        <p>1</p>
      </v-col>
      <v-col>
        <p>2</p>
      </v-col>
    </v-row>
  </v-container>
</template>

v-row のプロパティである align で縦軸の位置を調整し、 justify で横軸の位置を調整します。これらの設定による見た目を確認したい場合は、こちらをご覧ください。

<template>
  <!-- grid.vue -->
  <v-container fluid>
    <v-row aline="center" justify="center">
      <v-col>
        <p>1</p>
      </v-col>
      <v-col>
        <p>2</p>
      </v-col>
    </v-row>
  </v-container>
</template>

v-col は v-row の中に含まれる v-col の数に応じて自動的に幅が変わりますが、プロパティである cols の値を指定することで幅を固定することができます。さらに、 v-col 同士の間に v-spacer を追加することで、間をいい感じに開けることもできます。

<template>
  <!-- grid.vue -->
  <v-container fluid>
    <v-row aline="center" justify="center">
      <v-col cols="4">
        <p>1</p>
      </v-col>
      <v-spacer />
      <v-col cols="2">
        <p>2</p>
      </v-col>
    </v-row>
  </v-container>
</template>

Buttons

ボタンのコンポーネントとして v-btn があります。 v-btn は指定するプロパティによって、様々な見た目のボタンを表示することができます。例えば以下のようなプロパティがあります。

color: ボタンの背景色を指定します
outlined: 輪郭のみのボタンにします
rounded: 丸みを帯びたボタンにします
text: 文字のみのボタンにします
fab: Floating Action Button にします
icon: アイコン画像のみのボタンにします

また、 to プロパティを指定することで、画面遷移するボタンにすることができます。

<template>
  <!-- button.vue  -->
  <div>
    <v-btn rounded color="primary" to="/hoge">
      ほげ
    </v-btn>
    <v-btn rounded color="primary" :to="{ name: 'fuga', param: { a: 'b' } }">
      ふが
    </v-btn>
  </div>
</template>

Dialogs

ダイアログのコンポーネントとして v-dialog があります。

<template>
  <!-- dialog.vue -->
  <div>
    <v-dialog
      v-model="dialog"
      width="300"
    >
      <template v-slot:activator="{ on }">
        <v-btn v-on="on">
          ダイアログ表示
        </v-btn>
      </template>

      <v-card>
        <v-card-text>
          ほげ
        </v-card-text>

        <v-card-actions>
          <v-btn @click="dialog = false">
            閉じる
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

export default class dialob extends Vue {
  dialog = false;
}
</script>

また、 persistent を指定した場合、ダイアログの外側に触れてもダイアログが非表示にならなくなります。

他にも、ダイアログの中身をスクロール可能にする scrollable や、全画面で表示する fullscreen など、 v-dialog には様々なプロパティがあります。