2020-07-22

Vue で Material Design。Vuetify を導入してみた

Vue ベースのアプリに Material Design を導入できる、Vuetify を試してみた。

Vue Material Design Component Framework — Vuetify.js

前提

Vue CLI (@vue/cli 4.4.1) を使い、TypeScript + SCSS なアプリを作った状態を前提とする。

Vue-Router および Vuex も導入済みだ。

Vuetify を導入する

Vuetify を導入するには、以下のコマンドを叩く。

$ vue add vuetify

するといくつかパッケージがインストールされたり、設定ファイルが追加・更新されたりする。本稿執筆時点では vuetify v2.3.2 がインストールされた。

自分が試した限りだと、src/main.ts に vuetify が追加されるが、TypeScript エラーが発生してしまった。

参考 : Bug Report Could not find a declaration file for module 'vuetify/lib' · Issue #5944 · vuetifyjs/vuetify · GitHub

上の記事によると、tsconfig.json の types 配列内に "vuetify" を追加すれば解消できた。

{
  "compilerOptions": {
    // 省略
    
    "types": [
      "webpack-env",
      "jest",
      "vuetify"  // ← コレを追加した
    ],
  }
}

参考 : クイックスタート — Vuetify.js

Roboto フォントを使用しない・ベースフォントを変更するには

Vuetify をインストールすると、public/index.html に Roboto フォント用の link 要素が追加される。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

しかし自分は Roboto フォントは使わないスタイルに変更したかったので、まずはこの link 要素の記述を消してしまった。

で、ベースフォントを変更するには、src/scss/variables.scss という名前のファイルを作り、そこで Vuetify が用意する SCSS 変数を上書きしてやれば良い。このファイルは自動的に読み込まれるので、特に設定ファイルを変更したりする必要はない。

// src/scss/variables.scss

$body-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

このファイル内で SCSS を @import したりしなくても良い。便利。

参考 : SASS variables — Vuetify.js

Material Design Icons を手動インストールする

Vuetify をインストールすると、Roboto フォントと同じく、public/index.html に Material Design Icons を読み込む link 要素が追加される。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

CDN から読み込まずにバンドルしたい時は、この link 要素の記述を削除して、次のように書いていく。

# 本稿執筆時点で v5.3.45 がインストールされた
$ npm install -D @mdi/font

そして src/plugins/vuetify.ts に次のように追記していく。

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

// ↓ コレを追加
import '@mdi/font/css/materialdesignicons.css';

Vue.use(Vuetify);

export default new Vuetify({
  // ↓ 以下を追加
  icons: {
    iconfont: 'mdi'
  }
});

とりあえずココまでやっておけば初期設定は完了かな。

参考 : アイコン — Vuetify.js

Vuetify で作っていく

Vuetify は公式サイトのガイドがほとんど日本語化されているので、基本的には公式のリファレンスを見ていけば作れる。

ページの全体的なレイアウトは、以下の「既成レイアウト」を参考にすれば良い。

参考 : アプリケーションレイアウト — Vuetify.js

あとは「UI コンポーネント」を個別に見ていって書いていく。v-input なんかは専用の解説ページがないっぽいので、「API Explorer」ページも軽く見ておくと良いかと。

参考 : API explorer — Vuetify.js

フォント操作やマージン調整など細かいところは「スタイルとアニメーション」内にそれぞれまとまっている。

参考 : CSS Text and Typography helpers — Vuetify.js
参考 : CSS Spacing helpers — Vuetify.js

所感

Material Design 系のフレームワークはどれもそうなのだが、やたらと HTML が肥大化してつらい。

Vuetify 独自の要素を大量に覚えねばならず、普通の input や select 要素なんかを使えなくなるので、フォーム構築も大変だ。v-card や v-list は子要素が多すぎてつらい。

あと、ちょっと凝ったデザインを組み込もうとするとすんなりいかないところがあるので、ちょくちょく調べて Stack Overflow なんかのお世話にならないといけない。

フレームワークとしても富豪的で、ビルド後のバンドルサイズが全体で 1MB 近くなるかな。

一見した見栄えは良いけど、結構頑張って作っていかないといけないね。