【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
しばらく触ってみての使用感とか、書けたら書く、かも。