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にデプロイしてインターネット上でこのプロジェクトを表示させます。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
Udemy
0. 更新情報 #01
「Rails apiとNuxt.jsでSPA開発」のデモアプリを開発中...。【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1. 今回作るアプリケーション #01
Railsアプリの完成イメージ画像と作ろうと思った経緯
1. 今回作るアプリケーション #02
今回作るRailsアプリの全体像と機能の整理
2. 開発環境を整える #01
macにRailsをゼロからインストールする
2. 開発環境を整える #02
Rails apiモードのプロジェクトを作成し、Gitにコミットする
2. 開発環境を整える #03
Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
2. 開発環境を整える #04
HerokuCLIのインストールとherokuアプリケーションの作成
3. RailsをHerokuにデプロイする #01
Herokuのデータベース設定と開発に便利なgemを導入する
3. RailsをHerokuにデプロイする #02
HerokuにPumaを導入するためのRailsセットアップ
3. RailsをHerokuにデプロイする #03
Railsに"Hello"を表示してHerokuへデプロイする
4. RailsとNuxt.jsを共存させる #01
【RailsとNuxt.jsの共存】Rails上にNuxt.jsのプロジェクトを構築しよう
4. RailsとNuxt.jsを共存させる #02
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
4. RailsとNuxt.jsを共存させる #03
Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ
4. RailsとNuxt.jsを共存させる #04
初めてのRailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで
5. データベース設計 #01
データベースを正規化する前に、会計システムの勘定科目データを整理する
5. データベース設計 #02
会計システムのデータベース設計に挑む
6. バージョンアップ情報 #01
【ご報告】Nuxt.jsを2.10.2にバージョンアップしました
6. バージョンアップ情報 #02
【ご報告】Railsを6.0.0にバージョンアップしました
7. Userモデル開発 #01
本番環境と開発環境でRailsのSeedデータを切り替える
7. Userモデル開発 #02
Railsにユーザーテーブルを作成する【テーブル確認コマンド】
7. Userモデル開発 #03
【Rails】EachValidatorクラスを使ったEmailカスタムバリデーション【lib以下読み込み】
7. Userモデル開発 #04
【Rails】エラーメッセージの日本語化【i18nとja.ymlのセッティング】
7. Userモデル開発 #05
【Rails】開発・テスト・本番環境の全てにユーザーSeedデータ投入する
7. Userモデル開発 #06
【Rails】ユーザーモデルのバリデーションをテストする
8. ログイン周りのレイアウト設計 #01
【Nuxt.js】ログインフラグでレイアウトを切り替えるテクニック【2019/12/07追記あり】
8. ログイン周りのレイアウト設計 #02
【Nuxt.js】ウェルカムページのレイアウト構築【sassの導入】
8. ログイン周りのレイアウト設計 #03
【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
8. ログイン周りのレイアウト設計 #04
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる
ブログ構築
小ネタ集