SPA開発 4. RailsとNuxt.jsを共存させる #03
2019年10月12日に更新

Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ

今回達成すること

Nuxt.jsにVuetify2.0とfontawesomeを導入していきます。

この記事の読み方

ターミナル上のコマンドは、RailsとNuxtで以下のように分けます。

  • Railsプロジェクトに対するコマンド
myapp$ コマンド
  • Nuxtプロジェクトに対するコマンド
frontend$ コマンド

ターミナルは2画面開いておくことをお勧めします。

【Nuxt】早速Vuetify2.0をインストール

@nuxtjs/vuetifyモジュールをインストールしてVuetifyを導入していきます。

@nuxtjs/vuetify - npm

なお、@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に登録しましょう。

nuxt.config.jsmdevMdulesにvuetifyを追加します。

frontend/nuxt.config.js
{
  ...
  devModules: [
    ...
    '@nuxtjs/vuetify'
  ]
  ...
    
  // 追記
  vuetify: {
	
  },
}

モジュールは「devModules」と「modules」のどっちに追加する?

VuetifyはdevModulesに記載すると良いみたいです。

ただ、下記の原文は見つかりませんでした。

本番インストールのサイズを小さくし(devDependenciesにモジュールを追加)、起動時間を短縮します。Vuetifyモジュールはビルド中にのみ使用されます

https://github.com/nuxt-community/vuetify-module/issues/87

結論から言うと、どちらでもOKです。

どちらに記載しても本番環境で動くことを確認しました。

ただ、Vuetifyの公式ではdevModulesに追加すると書いていましたので、特段理由がない限り公式の通りにしたほうが無難です。

devModulesってなんなんだろうね🤔公式も出てこないし。

Nuxt2.9の場合

ちなみに、Nuxt2.9ではdevModulesは廃止され、buildModulesとなりました。

frontend/nuxt.config.js
{
  ...
	buildModules: [
    ...
    '@nuxtjs/vuetify'		// 追記
  ],
  ... // 以下同文
}

【Nuxt】layoutを編集する

Vuetifyは<v-app>タグで囲まれた範囲でしか正常に機能しません。

ですので、Nuxtの基本レイアウトを決めるlayoutディレクトリのdefault.vueを編集していきます。

frontend/layouts/default.vue
<template>
  <v-app>
    <nuxt />
  </v-app>
</template>

<style>タグで囲まれた部分は、当初のものなので丸っと削除しました。

【Nxut】トップページを編集する

次はトップページです。

pagesディレクトリのindex.vueへ移動してください。

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のグリッドシステムについては下記からご覧いただけます。

Grid system — Vuetify.js

ブラウザで確認してみよう

編集が終わったらNuxtを起動して、

frontend$ yarn dev

Railsも起動して、

myapp$ rails s

"http://localhost:3333/"にアクセスしてください。

2019-08-23 13-42-40

だいぶかっこよくなりましたね👍

Vuetify2にfontawesomeを導入する

ついでにfontawesomeも導入しちゃいましょう。

まず、Nuxtにfontawesome5モジュールをインストールします。

frontend$ yarn add @fortawesome/fontawesome-free

Nuxtのpluginsディレクトリにvuetify.jsファイルを新規作成して、下記のように編集します。

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'
  }
})

このplugins/vuetify.jsファイルを読み込むように、nuxt.config.jsを編集します。

frontend/nuxt.config.js
{
  ...
  plugins: [
    'plugins/vuetify'	// 追記
  ],
  ...
}

確認のため、index.vueにfas iconを追加してみましょう。

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を起動してブラウザで確認してみてください。

2019-08-23 14-15-13

参考
https://vuetifyjs.com/en/customization/icons

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はここから検索できます。

fontawesomeの公式サイト

コミットしとく

ここまでの変更をコミットしておきましょう。

Railsプロジェクト上でコミットします。

myapp$ git add -A
myapp$ git commit -m "add_vuetify2"

さて、次回は

今回は、NuxtにVuetify2.0とfontawesomeを導入しました。

次回はHerokuにデプロイしてインターネット上でこのプロジェクトを表示させます。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
SPA開発
今日のTweet
スポンサー広告