既存nuxtjsプロジェクトにVuetifyjsを追加する方法

@nabeemichi です。

一人でWEBアプリの企画から作成をしているるのですが、 新規でアプリをつくるときは、どのフレームワークを利用しようか考えるわけです。 今回はNuxt.jsを利用することを心に勝手に決めたわけでなのでキャッチアップするわけですが、 はじめてのフレームワークはキャッチアップに集中してしまうから、HTMLをマークアップしてることの面倒くささとかは忘れてるのですが、ある程度キャッチアップすると、、、

あれ？画面つくるのめんどくさい！

と、冷静におもうようになります。 だって、普通にHTMLマークアップして、CSS書いて、アニメーションつけたりすると作業量が多い。 なので、CSSフレームワークであるVuetify.jsをキャッチアップに利用していたNuxt.jsプロジェクトに後入れしようと思ったのだが、 Vuetify.jsのドキュメント見たら、Nuxt.jsに入れる方法って書いてないんだね。既存のVueプロジェクトに入れる方法ならあったので、それみながら作業すればなんとなくわかるけど、せっかくトライアンドエラーしたので

まずはインストール

Nuxt.jsプロジェクトにVuetify.jsをターミナルでインストールするのですが、npm利用しているかyarn利用してるかで変わりますが、ここはyarnベースで考えます。

yarn add vuetify

css-loaderを利用するので、入ってなければ同じくインストール

yarn add css-loader

マテリアルデザインのアイコンをインストール。 カレンダーのアイコンとかそうゆうやつ。

これは、Vuetify.jsの公式ドキュメントでコンポーネントのExampleのソースをコピペしながら開発したい場合は、入れておかないとアイコンがないよー！ってエラーになる。

yarn add material-design-icons-iconfont

Vuetify.jsをアプリ内で利用するための下ごしらえ

Nuxt.jsプロジェクトのpluginsフォルダ以下にVuetify用のファイルを作成

projectRoot ┣ assets ┣ componets ┣ layouts ┃ ┗ default.vue ←あとでVuetifyが適用できてたかの確認に使うファイル。nuxtがデフォで作ってる ┣ middleware ┣ pages ┣ plugins ┃ ┗ vuetify.js ←このファイルを新規作成 ┣ static ┣ store

新規作成したvuetify.jsの中身はこんなかんじ

   import Vue from 'vue'
   import Vuetify from 'vuetify'
   import 'vuetify/dist/vuetify.min.css'  // Vuetifyが利用するCSSを読み込む
   import 'material-design-icons-iconfont/dist/material-design-icons.css' // マテリアルデザインアイコンを読み込む

   Vue.use(Vuetify);

nuxt.config.jsに作成したpluginを追加

module.exports = {

  plugins: ['~plugins/vuetify.js'], //こいつを追記

}

Vutify.jsフレームワークが適用できたかの確認

以下のアプリの雛形のsourceをコピってきて同じのが出たらとりあえず作業完了

Baseline layout example — Vuetify.js

ペーストさきは

projectRoot/layouts/default.vue

これの中身を全部消してペースト。

プロジェクトの適当なページ（例えば、localhost:3000 とか) をブラウザでひらいて、雛形とおんなじの出てればOK。