はじめに
フロントエンドの開発を行う場合、 Bootstrap や Materialize などのライブラリを利用することがよくあるのではないかと思います。
今回の記事では、 Vue.js を使った開発でマテリアルデザインを容易に適用できる、 Vuetify というフレームワークの導入から基本的な使い方までを紹介します。
Vuetifyとは
Vuetify は マテリアルデザインが適用された様々な Vue.js のコンポーネントが含まれたフレームワークです。 Vuetify を使用することで、自分でCSSを定義しなくても美しいデザインのWebページを作ることができます。
Vuetifyを導入する
Vuetify の導入には様々なやり方がありますが、今回は Vue Cli 3 以降で作成したプロジェクトに Vuetify を導入する方法を紹介します。それ以外の導入方法については、こちらをご覧ください。
パッケージを追加する
はじめに Vuetify Vue Cli 3 package をプロジェクトに追加します。
| 1 | $ vue add vuetify |
すると、 いくつかのパッケージがインストールされ、ファイルの追加、および編集が行われます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 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"); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!-- 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> |
| 1 2 3 4 | // vue.config.js（新規） module.exports = { transpileDependencies: ["vuetify"] }; |
| 1 2 3 4 5 6 7 | // 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 の中に含める必要があります。
| 1 2 3 4 5 6 | <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 の場合、以下のような構造になると思います。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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 を追加していって、画面を構成します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <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 で横軸の位置を調整します。これらの設定による見た目を確認したい場合は、こちらをご覧ください。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <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 を追加することで、間をいい感じに開けることもできます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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 プロパティを指定することで、画面遷移するボタンにすることができます。
| 1 2 3 4 5 6 7 8 9 10 11 | <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 があります。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <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 には様々なプロパティがあります。
さいごに
今回紹介したのは Vuetify で用意されているコンポーネントのうちの一部です。他にも様々な使いやすいコンポーネントが用意されていますので。ぜひ一度ドキュメントを見ていただければと思います。
おすすめ書籍
