こんにちは！スギモトです！
業務でVuetifyを使って早くも2年近くたっていますが、未だに使い方で混乱することがあります。Vuetifyはすごく便利で使いこなせばものすごく強力なツールとなってくれるのですが、若干使い方にクセがあるような気もしています。
きっと導入しようと思いっていても、断念した方も多いことでしょう。
そこで、今回はVuetify入門として、インストールから以下の代表的なコンポーネントの使い方を整理していきたいと思います。
業務でよく使うVuetifyのコンポーネント
- v-layout
- v-flex
- v-text-field
- v-list
以降は、Vuetify v2.0系を前提に進めていきますが、v1.5系でもさほど違いはありません。
目次
Vuetifyのインストール方法
公式サイトにインストール方法が掲載されています。基本的にはこの流れにそっていけばOK。
前提条件は、npm か yarn が使える状態であること。
新規でプロジェクトを作る場合は、Vue-Cli を使うと便利です。
Vuetifyを既存のプロジェクトに追加する方法
すでに稼働しているアプリケーションにVuetifyを追加したい場合もあるかと思います。Vue-CLIで作成したプロジェクトなら add するだけで簡単です。
少しづつVueに移行していったようなアプリケーションだと、少々 Webpack で苦戦するかもしれませんが、その場合の追加方法も公式サイトに掲載されています。
v-layoutについて
Vuetifyを導入する場合、まず間違いなくグリッドシステムを利用することになると思います。<v-layout>はグリッドシステムを使うために必須です。
cssの
display: flex;
と同じ意味です。
基本的には次の v-flex と組み合わせて使います。
v-flexについて
<v-layout>の内側に設置することで、グリッドとして利用できます。
Vuetifyは12分割したグリッドシステムを採用しており、ディスプレイサイズに応じて幅を可変させることができます。
サンプルで次のようなコードをよく見ますよね
<v-flex xs12 sm6 md4 lg3>サンプル</v-flex>
これは、xsサイズのときは幅12で、smサイズのときは幅6にしてくれという意味となります。
この<v-flex>のグリッドシステムについては、説明を聞くよりも実際に手元で動かしてみたほうが理解が早いと思います。
よくわからない方はぜひサンプルコードを作ってみて試してみることをおすすめします。
また、公式サイトにも具体的な説明が掲載されていますのでご確認ください。
v-text-fieldについて
Vuetify の input box です。
あらかじめマテリアルデザインを実現するために必要な要素が用意されており、ほとんどpropsで渡すだけで、開発者は何もすることがないくらい便利です。
本当に使い勝手がいいのですが、1つだけ残念な点があって、
disabled or readonly がちょっと見にくいので色を濃くするか変えてと毎回ユーザから改善要望がくるんですよね。
普段、社内システムを作っているので v-text-field をめちゃめちゃ使います。そうなってくると当然入力できる or できない、みたいな制御も大量に行うのですが、Vuetifyの<v-text-field>の入力不可のデザインがスタッフ部門に不評で、しかたがなくデザインを上書きしているのが、ちょっとめんどくさい。。。
それ以外は問題ないんですけどね。
v-listについて
<v-list>も業務でよく使います。なんとなくわかると思いますけど、Vuetifyのリストです。
ただ、標準的なリストと違ってはじめからいい感じにデザインされているので個人的にかなり重宝しています。
特にアバターとかアイコンみたいなモノを出したいときに便利です。
あと、<v-navigation-drawer>と組み合わせてサイドメニューを作るときにも必ず利用することになりますね。
その他よく使うコンポーネント
- v-date-picker
- v-data-table
- v-alert
- v-card
- v-dialog
どれもアプリケーションを作成する際には必須となる機能ですが、当然Vuetifyにもありますし、比較的簡単に導入できます。
よかったらこちらも参考にしてください。
まとめ
いかがでしたでしょうか？
まだまだ全然紹介しきれていないのですが、Vuetifyは便利なフレームワークですのでぜひ実践投入を検討してみてください。