vue.js  WebApp  vuetify 
 2019-11-09

はじめに

Vuetifyは、Vue.jsで使えるマテリアルデザインのフレームワークです。
https://vuetifyjs.com/ja/

マテリアルデザインに入門すべく、Vuetifyを使って読んだ本を管理するサービスを作ってみました。

Book Storage

簡単にマテリアルデザインを使えるVuetifyですが、以下のような特徴があります。

  • ボタンやカードなどのマテリアルデザインのコンポーネントが用意してあり、簡単に利用できる
  • flexboxをラップしたグリッドシステムがあり、レスポンシブ対応が容易
  • コンポーネントとグリッドシステムを用いることで、cssを(ほとんど)書く必要がない
  • マテリアルデザインの仕様であるフォント(Roboto Font)、アイコンが利用できる

ドキュメントが充実しており、基本的にドキュメントを見ると簡単に使えるという印象です。ドキュメントはjavascriptで書かれているため、typescriptで使う場合には、読み換える必要があります。

サポートブラウザはドキュメントを参照
https://vuetifyjs.com/ja/getting-started/quick-start#supported-browsers

2019年7月にv2.0.0がリリースされ、旧バージョン(v1.5.0)から記法が大きく変わったので、その際に注意する点も含め紹介していきます。

インストール

vue cli 3を使うと楽ということなのでvue cliを使ってインストールします。


$ vue --version
3.9.1

typescriptのプロジェクトを作成します.


$ vue create my-app

vuetifyを追加する.

$ cd my-app
$ vue add vuetify

すると以下のような選択肢が表示される. Defaultを選択すると、ツリーシェイキングなどの機能が追加された形で追加される.

$ ? Choose a preset: (Use arrow keys)
$ > Default (recommended)
$   Prototype (rapid development)
$   Configure (advanced)

ツリーシェイキングについては、こちらの記事がわかりやすかったです。
https://qiita.com/genshun9/items/4a00aa6c709b9f024821

ツリーシェイキングはwebpack4から利用でき、vue cli3はwebpack4上に構築されるため、vue cli3を利用していると自動で利用できるようになります。vuetifyのバージョンは2.0.0。

package.json


  "dependencies": {
    "vuetify": "^2.0.0",
    ..
    },

フォントの追加も行います。


$ npm install @mdi/font -D

vuetifyを追加すると、新たにsrc/plugins/vuetify.tsが追加されます。


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

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
});

ここで起動すると、コンパイルエラーが出ていたので、tsconfigに以下を追加すると、うまく動くようになりました。

"compilerOptions": {
    "types": ["vuetify"],

既存のプロジェクトへの追加

yarnもしくはnpmを使いインストールします。

$ yarn add vuetify
// OR
$ npm install vuetify --save

上記のsrc/plugins/vuetify.tsを新たに作成。

詳しくはドキュメントを参考
https://vuetifyjs.com/ja/getting-started/quick-start

Grid System

vuetifyを使うには、全体を<v-app>で囲みます。

はじめに読み込まれるコンポーネントに以下のように書けば良いかと思います。


<template>
    <v-app>
        <v-header></v-header>
        <router-view/>
        <v-footer></v-footer>
    </v-app>
</template>

基本的には、以下の例のようにv-container、v-row、v-colの順番で囲む形になります。旧バージョンで利用していたv-flexやv-layoutなどの記法の代わりに、v-row、v-colを使うので注意です。


<template>
    <v-container>
      <v-row>
        <v-col cols=12>
          コンテンツ
        </v-col>
      </v-row>
    </v-container>
</template>

v-containerはコンテンツを中央揃えおよび水平方向にパディングにします。

gridは、Bootstrapと同様、12個のgridがあります。


<v-col cols=12>
    ...
</v-col>

colsプロパティを使い、gridを指定します。また、スマホ、PC用など、5つのブレークポイントが用意されており、colsに加え、ブレークポイントごとにgridが設定可能です。


<v-col cols="12" lg="6" md="6" sm="6">
    ...
</v-col>

各ブレイクポイントは以下

gridの指定でハマったポイントは、こちらの記事を参考
https://qiita.com/iss-f/items/a86586de095368cdd9a3

詳しい部分は、grid system ドキュメントを参照
https://vuetifyjs.com/ja/components/grids

コンポーネント

マテリアルデザイン仕様のカードやボタンなどのコンポーネントが用意されています. 色やサイズ、アニメーションなどcssを書かずに設定ができます。 各コンポーネントが受け取れるプロパティやイベントなどは、ドキュメントに詳しく記載してあります。

ここでは、 基本的なコンポーネントをいくつか挙げていきます。

card

マテリアルデザインでよく見るカードは以下のように作ることができます。


 <v-card
    max-width="344"
    class="mx-auto"
  >
    <v-card-title>I'm a title</v-card-title>
    <v-card-text>I'm card text</v-card-text>
    <v-card-actions>
      <v-btn text>Click</v-btn>
    </v-card-actions>
  </v-card>

v-card-title、v-card-textには、それぞれタイトル用本文用に、フォントサイズやpaddingが設定してあります。 v-card-actionには、クリックイベントなどのアクションを設定します。

Button

v-btnタグを使い、波紋の広がるアニメーションがついたボタンが作成できます。

シンプルな例は以下の通り。


<v-btn medium color="warning" dark>Normal Button</v-btn>

small, medium などのプロパティでボタンサイズが指定可能です。bootstrap同様、info、primaryなどで色の指定も可能。

また、その他タグを使い細かい色の指定も可能です。これらのタグは、ボタン以外のコンポーネントでも使用可能です。

その他の色は、ドキュメントを参照
https://vuetifyjs.com/ja/styles/colors

outlined button

色抜きのボタンにする場合には、outlinedプロパティを使います。


<v-btn medium color="warning" dark outlined>Normal Button</v-btn>

v2.0.0からoutlinedとなり、outlineプロパティは廃止されたので注意です。

floating button

fabプロパティを追加することで、フローティングボタンを作成することができます。


<v-btn fab dark color="indigo">
      <v-icon dark>mdi-plus</v-icon>
</v-btn>

loading button

loadingプロパティにboolean値を設定することで、trueの場合にローディングアニメーションが現れるようにすることもできます。


<v-btn 
    :loading="loading"
    medium 
    color="warning" 
    dark
    >
        Loading Button
</v-btn>

その他の設定は、ドキュメントを参照
https://vuetifyjs.com/ja/components/buttons

Pagination


<v-pagination
    v-model="page"
    :length="15"
    :total-visible="7"
    @input="paginate()"
></v-pagination>

v-modelに現在のページ番号を設定します。lengthプロパティは全ページ数、total-visibleで表示するページングボタンの数を指定。クリックイベントで、ページングボタン押下時の挙動を設定して使うことが多いかと思います。

まとめ

Vue.jsのマテリアルデザインのフレームワークである、Vuetifyを使ってサービスを作って見ました。簡単にマテリアルデザインに入門できて、おすすめです。

ここで紹介した以外にも便利なコンポーネントが多数用意してあるのでドキュメント読んでみてください。

See Also