Vuetifyを使ってみる

f:id:utouto97:20210704221944p:plain

Vuetifyを使ってみる

環境はVue 2

今回は、Vuetifyを導入していきます。

VuetifyはVueで使えるマテリアルデザインフレームワーク (UIフレームワーク) です。

github.com

公式のドキュメントも充実していて、導入は簡単に行えます。

vuetifyjs.com

VuetifyはVue 3には対応しておらず、Vue 2のみに対応しているようです。

f:id:utouto97:20210911021712p:plain

Vuetifyをインストールして使ってみる

Vue CLI で Vue 2をインストールし終わった状態から作業を始めることを想定しています。

Vuetifyのインストールは、Vue CLIで容易に行うことができます。

$ vue add vuetify

すると、presetの選択の質問をされます。
今回は、defaultを選びました。

あとは、自動でVuetifyがインストールされます。

サーバーを起動して、ブラウザから確認してみます。
以下のような画面が表示されます。

f:id:utouto97:20210911014118p:plain

終わり