Vue.js #4 Advent Calendar 2017 - Qiita の 19 日目のエントリー。 (先日の記事の続きを書こうと思っていたが、こちらの日が先に来てしまった) 最近、フロントエンドエンジニア・デザイナー不在のプライベートな開発において、フロントサイドの実装を任されることがあった。 その際に Vuetify.js を用いて比較的簡単にマテリアルデザインのページを実現できたので、その備忘録。 (意見・ツッコミなどは歓迎) vuetifyjs.com 出来上がった画面のイメージはこんな感じ。 ※グラフ描画は Vuetify.js で提供していないので、 vue-chartjs を利用している。 このレベルであれば、Vue.js の基礎知識だけある状態から1日で辿り着くことが出来た。 概要 Vuetify.js はマテリアルデザインのコンポーネントを80種類以上提供している。
![Vuetify.js でお手軽マテリアルデザイン + Atomic Design「風」のディレクトリ構成 - s平面の左側](https://cdn-ak-scissors.b.st-hatena.com/image/square/2464cdea598d3cb26f3708ee8913d654f1c20a2e/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fo%2Fokashoi%2F20171218%2F20171218114611.png)