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


関連記事

js

WebページにGoogleMapを配置する

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

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

AMPに対応してモバイルページを高速に表示させる

1 はじめに2 AMPとは3 なぜAMPでは高速に表示されるのか3.1 非同期スクリプトのみを許可3.2 リソース読み込みに優先度を付ける3.3 プリレンダリング4 AMPの3要素4.1 AMP HT ...

react-icon

React QueryのSuspese Modeを使ってみた! [TypeScript]

1 はじめに2 React Suspenseとは3 React QueryのSuspense Mode3.1 事前準備3.2 Suspenseモードの有効化3.3 データをフェッチするコンポーネントの ...

フォロー

blog-page_side_responsive

2019年12月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

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