FrontEnd

【入門】Vuetifyで手軽に綺麗なWebページを作る

投稿日:2019年12月26日 更新日:

はじめに

フロントエンドの開発を行う場合、 Bootstrap や Materialize などのライブラリを利用することがよくあるのではないかと思います。

今回の記事では、 Vue.js を使った開発でマテリアルデザインを容易に適用できる、 Vuetify  というフレームワークの導入から基本的な使い方までを紹介します。

Vuetifyとは

Vuetify は マテリアルデザインが適用された様々な Vue.js のコンポーネントが含まれたフレームワークです。 Vuetify を使用することで、自分でCSSを定義しなくても美しいデザインのWebページを作ることができます。

Vuetifyを導入する

Vuetify の導入には様々なやり方がありますが、今回は Vue Cli 3 以降で作成したプロジェクトに Vuetify を導入する方法を紹介します。それ以外の導入方法については、こちらをご覧ください。

パッケージを追加する

はじめに Vuetify Vue Cli 3 package をプロジェクトに追加します。

すると、 いくつかのパッケージがインストールされ、ファイルの追加、および編集が行われます。

TypeScriptを採用している場合

TypeScript で書いている場合、そのままだとビルドエラーになると思います。そのため、 tsconfig.json の types に vuetify を追加します。

Vuetifyのコンポーネント

Vuetify では様々なコンポーネントが用意されていますが、ここでは一般的に使われるであろうコンポーネントをいくつかピックアップして紹介します。

前提として、 Vuetify のコンポーネントは v-app の中に含める必要があります。

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 の場合、以下のような構造になると思います。

v-navigation-drawer などの領域のサイズに応じて v-content の領域のサイズを動的に変更したい場合、 v-navigation-drawer などに app を指定し、 v-content の外側に配置する必要があります。

また、こちらに様々なレイアウトのサンプルが用意されています。

Grids

Bootstrap のグリッドシステムを想像してもらうとわかりやすいと思います。 v-row の中に v-col を追加していって、画面を構成します。

v-row のプロパティである align で縦軸の位置を調整し、 justify で横軸の位置を調整します。これらの設定による見た目を確認したい場合は、こちらをご覧ください。

v-col は v-row の中に含まれる v-col の数に応じて自動的に幅が変わりますが、プロパティである cols の値を指定することで幅を固定することができます。さらに、 v-col 同士の間に v-spacer を追加することで、間をいい感じに開けることもできます。

Buttons

ボタンのコンポーネントとして v-btn があります。 v-btn は指定するプロパティによって、様々な見た目のボタンを表示することができます。例えば以下のようなプロパティがあります。

  • color: ボタンの背景色を指定します
  • outlined: 輪郭のみのボタンにします
  • rounded: 丸みを帯びたボタンにします
  • text: 文字のみのボタンにします
  • fab: Floating Action Button にします
  • icon: アイコン画像のみのボタンにします

また、 to プロパティを指定することで、画面遷移するボタンにすることができます。

Dialogs

ダイアログのコンポーネントとして v-dialog があります。

また、 persistent を指定した場合、ダイアログの外側に触れてもダイアログが非表示にならなくなります。

他にも、ダイアログの中身をスクロール可能にする scrollable や、全画面で表示する fullscreen など、 v-dialog には様々なプロパティがあります。

さいごに

今回紹介したのは Vuetify で用意されているコンポーネントのうちの一部です。他にも様々な使いやすいコンポーネントが用意されていますので。ぜひ一度ドキュメントを見ていただければと思います。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで 動かして学ぶ!Vue.js開発入門 (NEXT ONE) これからはじめるVue.js実践入門

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

js

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年12月
1234567
891011121314
15161718192021
22232425262728
293031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。