Vuetifyの使い方(UIフレームワークで手軽に構築)

Vuetifyは、Vue.js用のUIコンポーネントフレームワークです。マテリアルデザインの手法に基づいた豊富なコンポーネントを提供しています。ここでは、Nuxt.jsプロジェクトにVuetifyを導入して、基本的な利用方法を確認します。

Vuetifyプロジェクト生成

create-nuxt-app でプロジェクト生成します。

$ yarn create nuxt-app sample-nuxt-vuetify
(省略)
> Generating Nuxt.js project in /xxx/sample-nuxt-vuetify
? Project name sample-nuxt-vuetify
? Project description My supreme Nuxt.js project
? Use a custom server framework none
? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Use a custom UI framework vuetify
? Use a custom test framework jest
? Choose rendering mode Universal
? Author name wakuwaku
? Choose a package manager yarn

  To get started:

	cd sample-nuxt-vuetify
	yarn run dev

  To build & start for production:

	cd sample-nuxt-vuetify
	yarn run build
	yarn start

  To test:

	cd sample-nuxt-vuetify
	yarn run test

✨  Done in 120.42s.

Use a custom UI frameworkvuetify を選択しています。

確認

バージョン

今回インストールされたバージョンは以下の通りです。

$ yarn list | grep nuxt@
├─ nuxt@2.6.2
$ 
$ yarn list | grep vuetify
├─ vuetify-loader@1.2.2
├─ vuetify@1.5.12

プラグイン( plugins/vuetify.js )

plugins/vuetify.js というプラグインが生成されていました。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
  theme: {
    primary: colors.blue.darken2,
    accent: colors.grey.darken3,
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.base,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3
  }
})

上記プラグインを nuxt.config.js で設定しています。

大枠の構成
( v-app, v-content )

layouts/default.vue で大枠の構成が組まれています。

<template>
  <v-app dark>
    <v-navigation-drawer v-model="drawer" :mini-variant="miniVariant" :clipped="clipped" fixed app>
      <!--省略-->
    </v-navigation-drawer>
    <v-toolbar :clipped-left="clipped" fixed app>
      <!--省略-->
    </v-toolbar>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
      <!--省略-->
    </v-navigation-drawer>
    <v-footer :fixed="fixed" app>
      <!--省略-->
    </v-footer>
  </v-app>
</template>

vuetifyでは、全てのVuetifyコンポーネントを v-app でラップする必要があります。グリッドのブレークポイントを決定するのに利用されるようです。

yarn dev 開発環境を起動して、上記ソースのデザインを確認します。

668-vuejs-vuetify-1.png

レスポンシブ対応されています。

関連リンク

グリッドシステムによるレイアウト
( v-container > v-layout > v-flex )

flex-boxベースのグリッドシステムを提供しています。

以下のソースのように、v-container > v-layout > v-flex といった形で利用します。

<v-container grid-list-md text-xs-center>
  <v-layout row wrap>
    <v-flex xs12>
      <!--省略-->
    </v-flex>
    <v-flex v-for="i in 2" :key="`6${i}`" xs6>
      <!--省略-->
    </v-flex>
    <v-flex v-for="i in 3" :key="`4${i}`" xs4>
      <!--省略-->
    </v-flex>
    <v-flex v-for="i in 12" :key="`1${i}`" xs1>
      <!--省略-->
    </v-flex>
  </v-layout>
</v-container>

v-layoutFlexコンテナ として働き、v-flexFlexアイテム として働きます。

参考

UIコンポーネント一覧

Vuetifyが提供するUIコンポーネントについて確認します。
主観的に目的別分類してみます。

ナビゲーション

コンポーネント 補足
Toolbar ヘッダーメニューとして活用可能。
Bottom nav モバイルむけのボトムナビ。
Breadcrumbs パンくずナビ。
Navigation drawer サイドナビ。
Pagination ページネーション。

コンテンツの構成

コンポーネント 補足
Card 1つの関心ごとに対する情報、操作の集約。
List 関連のあるコンテンツ一覧の集約。
Subheader リストの種類を示すための文章。
Divider 区切り線。
Footer フッター。
Sheet シート。

必要なときに表示
( コンテンツ )

コンポーネント 補足
Expansion Panel アコーディオン。
Tab タブ。
Windos 表示コンテンツの切り替え。

定量データを表示

コンポーネント 補足
Data iterator データ表示。
Data table 表形式データを表示。
Sparkline グラフ表示。

イメージ表示

コンポーネント 補足
Image イメージ表示。
Carousel 複数のビジュアルコンテンツを1箇所で回転して表示。
Parallax スクロールと連動。

理解の促進を補助

コンポーネント 補足
Avatar プロフィール写真の表示。
Chip タグなどの小さい情報を表示。
Icon Material Iconsフォントライブラリ。

ボタン

コンポーネント 補足
Button ボタン。
Button Group ボタンのグルーピング。
Button floating-action-button 画面の主要なアクションを促す。
https://material.io/design/components/buttons-floating-action-button.html

状態のお知らせ

コンポーネント 補足
Alert 成功、情報、警告、エラーといった情報を伝える。
Badge 情報通知(カートに入れた数、お知らせの数など)。
Hover ホバー状態。
Progress ロードなどの進捗状況。

必要なときに表示
( アクション, 補足情報 )

コンポーネント 補足
Dialog ダイアログ(モーダル, フォームダイアログ, Loaderなど)の表示。
Bottom sheet ボトムにダイアログを表示。
Menu プルダウンでメニュー表示。
Snackbar 位置を指定して通知表示。
Tooltip hoverした時表示する要素の情報。
Treeview ネストデータの格納・表示。

ユーザーフォーム

フォームエリア

コンポーネント 補足
Form フォームエリアを設定。Validation pluginも利用可能。

入力系(フォーム部品)

コンポーネント 補足
Text field テキストフィールド(1行)。
Textarea テキストエリア(複数行)。

選択系(フォーム部品)

コンポーネント 補足
Selection control 単一選択、複数選択。
Select 選択可能な項目一覧を表示。
Combobox 項目候補一覧を表示。新しく項目を作ることも可能。

補助系(フォーム部品)

コンポーネント 補足
Autocomplete 入力候補を表示。
Slider 入力数値の視覚化。
Date Picker 年月日選択。
Time Picker 時間選択。
Rating 評価。

その他

コンポーネント 補足
Input カスタムフォームを作成するためのベースライン。
Item Group 複数コンポーネントの中から選択。

特定ニーズがあれば活用

コンポーネント 補足
Stepper ステップの進行状況。
Timeline 時系列情報。
Calendar カレンダー。

ヘルパーCSSクラス

コンポーネント間の調整を行う際、自分でCSSを書いても良いですが、Vuetifyにあらかじめ組み込まれているCSSクラスを活用することもできます。

例を抜粋します。

カスタムディレクティブ

ディレクティブ 補足
v-resize ウィンドウサイズ変更時に特定処理を呼び出し
v-ripple ユーザーアクション時に波紋表示
v-scroll スクロール時に特定処理を呼び出し
v-touch スワイプ時に特定処理を呼び出し。

Vuetifyのドキュメントソースを確認

Vuetifyのドキュメント自体がVuetifyで構築されているため、Vuetifyの活用方法を理解するのに役立つときがあります。

git clone git@github.com:vuetifyjs/vuetify.git

上記コマンドでソースをダウンロード後、packages/docs/配下でドキュメントのソースを確認できます。

参考

わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。