Vuetifyの使い方：実践の前に覚えておいた方がいいこと

Vuetifyを導入したものの、使い方にクセがあって投げ出してしまった方もいるのではないでしょうか。ぼくも今だに試行錯誤しながら使っていますが、何を作る場合でも必要な基本的な知識があります。v-app、v-content、v-container、v-layout、v-flexあたりがそれかなと思います。この記事ではそれらの使い方について解説しています。

v-appについて

v-appはVeutifyを使うために必須の要素です。Vuetifyのコンポーネントは必ずv-app要素の内側に書く必要があります。v-appで囲まないでVuetifyのコンポーネントを使うと予期しない動作や表示になってしまいます。下記のようにVuetifyのコンポーネントをv-appで囲みます。

v-contentについて

Vuetifyを採用する場合、レイアウトシステムを使う方が多いのではないかと思うのですが、こちらのサンプルのようにサイドメニューの表示・非表示にメインコンテンツを連動させる場合はv-contentでコンテンツを囲む必要があります。v-contentで囲まなければメインコンテンツの動きはサイドメニューの動きに連動しなくなります。

v-containerについて

v-containerはその名の通りコンテナです。オプション属性がいろいろとあって、fluid属性を付与することで左右いっぱいにコンテナを広げたり、fill-height属性を付与することでv-containerの内部要素を上下中央寄せにしたりできます。

v-layoutについて

グリッドシステムを使うために必要です。意味としては<div style=”display: flex;”></div>と同じです。v-layoutの内側に次に紹介するv-flexを設置することでグリットデザインを実現できます。

v-layoutのポイントとしては、wrap属性を付けることです。wrap属性を付けないとグリットシステムが機能せず、要素が延々と横につながってしまいます。

v-flexについて

v-layoutの内側に設置することでグリッドデザインを実現できます。Vuetifyは12分割のグリッドシステムを採用しています。v-flexにxs12、sm6、md4のような属性を与えることでブラウザの幅で可変するようになります。xs12というのはブラウザ幅がxs(600px未満と定義されています)の時12個分のグリッドを使うという意味です。

属性ごとの幅指定は下記のとおりです。

下記のようにv-flexを設定した場合は、表示幅が600px未満のときはv-flex1つについき12カラムを使い、600px以上かつ960px未満のときはv-flex1つにつき6カラムを使い、960px以上1264px未満のときはv-flex1つにつき4カラムを使うという意味になります。

筆者

以上、Vuetifyを実践で使う前に覚えておいた方がよいことをまとめてみました。僕の場合がそうでしたが、基本知識が不足している状態でいろいろと試していたため、なかなか作業がはかどらないことがありました。今回紹介したことを覚えておけば、あとは最適なコンポーネントを選んでいくことで、デザイン面ではある程度良いものに仕上がるのではないかと思います。Vuetify、慣れてくるとVue.jsのコンポーネントシステムと相性がよくて楽しいです。