今回達成すること
Nuxt.jsにVuetify2.0とfontawesomeを導入していきます。
この記事の読み方
ターミナル上のコマンドは、RailsとNuxtで以下のように分けます。
- Railsプロジェクトに対するコマンド
myapp$ コマンド
- Nuxtプロジェクトに対するコマンド
frontend$ コマンド
ターミナルは2画面開いておくことをお勧めします。
【Nuxt】早速Vuetify2.0をインストール
なお、@nuxtjs/vuetify1.0.0以上をインストールすると、Vuetify2.0が導入されるようになっています。(2019年8月現在はバージョン1.3.x)
yarnは、コマンドオプション無しで最新のものがインストールされますので下記コマンドを実行してください。
frontend$ yarn add @nuxtjs/vuetify
Vuetify2.0が導入されたか確認しておきましょう。
下のようにvuetify@2.X.Xが出てこればOKです。
frontend$ yarn list vuetify
└─ vuetify@2.0.10
Vuetify2のセットアップ
インストールが完了したら、Nuxtに登録しましょう。
mdevMdulesにvuetifyを追加します。
frontend/nuxt.config.js
{
...
devModules: [
...
'@nuxtjs/vuetify'
]
...
// 追記
vuetify: {
},
}
モジュールは「devModules」と「modules」のどっちに追加する?
VuetifyはdevModulesに記載すると良いみたいです。
ただ、下記の原文は見つかりませんでした。
本番インストールのサイズを小さくし（devDependenciesにモジュールを追加）、起動時間を短縮します。Vuetifyモジュールはビルド中にのみ使用されます
結論から言うと、どちらでもOKです。
どちらに記載しても本番環境で動くことを確認しました。
ただ、Vuetifyの公式ではdevModulesに追加すると書いていましたので、特段理由がない限り公式の通りにしたほうが無難です。
devModulesってなんなんだろうね🤔公式も出てこないし。
Nuxt2.9の場合
ちなみに、Nuxt2.9ではdevModulesは廃止され、buildModulesとなりました。
frontend/nuxt.config.js
{
...
buildModules: [
...
'@nuxtjs/vuetify' // 追記
],
... // 以下同文
}
【Nuxt】layoutを編集する
Vuetifyは<v-app>タグで囲まれた範囲でしか正常に機能しません。
ですので、Nuxtの基本レイアウトを決めるlayoutディレクトリの
frontend/layouts/default.vue
<template>
<v-app>
<nuxt />
</v-app>
</template>
<style>タグで囲まれた部分は、当初のものなので丸っと削除しました。
【Nxut】トップページを編集する
次はトップページです。
pagesディレクトリの
frontend/pages/index.vue
<template>
<v-container fluid fill-height>
<v-row
class="text-center"
>
<v-col cols="12">
{{ msg }}
</v-col>
<v-col cols="12">
<v-btn
color="primary"
@click="getMsg"
>
Click Me!!
</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
msg: ''
}),
methods: {
getMsg () {
this.$axios.$get('/api/v1/hello').then(res => (this.msg = res.msg))
}
}
}
</script>
Vuetify2.0のグリッドシステムについては下記からご覧いただけます。
ブラウザで確認してみよう
編集が終わったらNuxtを起動して、
frontend$ yarn dev
Railsも起動して、
myapp$ rails s
"http://localhost:3333/"にアクセスしてください。
だいぶかっこよくなりましたね:thumbsup:
Vuetify2にfontawesomeを導入する
ついでにfontawesomeも導入しちゃいましょう。
まず、Nuxtに
frontend$ yarn add @fortawesome/fontawesome-free
Nuxtのpluginsディレクトリに
frontend/plugins/vuetify.js
import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'fa'
}
})
この
frontend/nuxt.config.js
{
...
plugins: [
'plugins/vuetify' // 追記
],
...
}
確認のため、
frontend/pages/index.vue
</v-col>
<!-- 追記 -->
<v-col cols="12">
<v-row justify="space-around">
<v-icon>fas fa-lock</v-icon>
<v-icon>fas fa-search</v-icon>
<v-icon>fas fa-list</v-icon>
<v-icon>fas fa-edit</v-icon>
<v-icon>fas fa-tachometer-alt</v-icon>
<v-icon>fas fa-circle-notch fa-spin</v-icon>
</v-row>
</v-col>
<!-- 追記終了 -->
</v-row>
</v-container>
</template>
ちゃんとiconが表示されているか、Nuxtを起動してブラウザで確認してみてください。
fontawesomeの使い方(Vuetifyの場合)
Vuetifyの場合、iconは全て<v-icon>タグで表示します。
この<v-icon>タグの中に、fontawesomeのclass部分を直接記入します。
<!-- fontawesomeの場合 -->
<i class="fab fa-500px"></i>
<!-- Vuetifyの場合 -->
<v-icon>fab fa-500px</v-icon>
iconはここから検索できます。
コミットしとく
ここまでの変更をコミットしておきましょう。
Railsプロジェクト上でコミットします。
myapp$ git add -A
myapp$ git commit -m "add_vuetify2"
さて、次回は
今回は、NuxtにVuetify2.0とfontawesomeを導入しました。
次回はHerokuにデプロイしてインターネット上でこのプロジェクトを表示させます。