【Vue.js】Vue.jsアプリにVuetifyを導入してみた

はじめに

こんにちは、がんがんです。

先日の記事でVue.js + Firebase Hostingについて書きました。
gangannikki.hatenadiary.jp

発表後のもくもく会では、Material-uiのVue.js版を使ってみたいなと思っていろいろと調べてました。
すると、MaterialデザインのVuetifyなるものがあることを知りました。

今回はVuetifyを少しだけ触ってみようと思います。

目的

目的

• Vuetifyを触ってみる
• Material-ui、BootstrapVueとの差異などもなんとなく実感する

公式サイト

vuetifyjs.com

環境構築

まずは環境構築です。前回の記事でVue CLIは導入済みなため、下記コマンドでインストールしていきます。

$  vue add vuetify
...
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: (Use arrow keys)
❯ Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

実際にserveしてみます

インストールが完了したらyarn surveornpm run serveしてみます。
すると、下記の画面が表示されます。VuetifyをインストールすることでHelloWorld.vueの中身も少し変わるのですね。

実際にいろいろ遊んでみる

実際にVuetifyのコンポーネントを使ってみます。
作るモノはFigmaで作ったトーナメント表です。昨日のデザインしてみた記事はこちらです。
gangannikki.hatenadiary.jp

実際に作ってみた結果はこんな感じです。

実際にループで回してみましたが上手くv-container・v-row・v-colの設定が上手く出来てなかったので、次回やるときは改善案件です。
コードはこちらの記事で書いてます。
gangannikki.hatenadiary.jp

おわりに

今回はVuetifyを触ってみました。触ってみた感想として、v-card-titleなどの設定が細かく分けられているのは分かりやすいなと思いました。
ただ、v-forやv-ifなどの覚えることが多々あるのは大変だなと思いました。
今後扱うことがあればしっかりと勉強し直したいです。

Firebaseには後ほどdeployしていきます。