【Vue.js】Vuetifyを使ってVueでマテリアルデザインを実現する

Vueを使いつつマテリアルデザインを実現したいとき、Materialize使うのはjQueryで共存できるとはいってもVue使いつつjQuery使うっていうのは極力避けたくて、色々探してたらVuetifyってのがあった。

一通りのことはできそうだし、ドキュメントも充実してるし、いい感じ。

とりあえず動かしてみる。
対象プロジェクト直下で

$ yarn add vuetify

でインストール。

有効化するには

import Vue from 'vue'
import 'vuetify/dist/vuetify.min.css' // 必要ならCSSも。ここに書くならcss-loaderが必要。
import Vuetify from 'vuetify' // <- 追加

// ...

Vue.use(Vuetify) // <-追加

って感じで、vue-cliを使っているなら src/main.js とかに追記。

ここまでできたらもう使えるはずなので、以下のようなHello Worldを試しに書いてみると良さげ。

https://codepen.io/johnjleider/pen/jYZwVZ

しばらく触ってみての使用感とか、書けたら書く、かも。