ブログ構築 4. Contentfulのセットアップ #01
2019年10月12日に更新

【Nuxt.js Universal】Vuetify2.0にバージョンアップしよう

今回達成すること

Vuetify1.5から、Vuetify2.0にバージョンアップしていきます。

ついでに本番環境で重くなるコードや、不要なVuetify関連のファイルを全て削除していきます。

ここで記載するバージョンアップ方法は、Nuxtアプリ作成時に導入したVuetifyをバージョンアップする手順となります。

公式のバージョンアップ手順はここにあります。

https://github.com/nuxt-community/vuetify-module/blob/HEAD/MIGRATION_GUIDE.md

現状のVuetify

yarn create nuxt-appで導入したVuetifyはバージョン1.5になります。

$ yarn list vuetify

└─ vuetify@1.5.16

Vuetify1.5はドキュメントが充実しているにも関わらず、検索フォームがないので情報が探しづらい。。。

また、Google上で検索してもVuetify2.0の情報が一番に出てきますので、バージョン1.5の情報にたどり着きにくい状況です。

今から開発を始める場合には、Vuetify1.5はおすすめしません。

既存のVuetify関連ファイルを全て削除する

まず"@nuxtjs/vuetify": "0.5.5"モジュールを削除します。

$ yarn remove @nuxtjs/vuetify

不要なファイル群の削除

assets/styleディレクトリにあるapp.stylvariables.stylを削除します。

assets
 L style
   L app.styl  			// 削除
   L variables.styl  // 削除

headプロパティのGoogleFontを削除

@nuxtjs/vuetifyでは、GoogleFontのダウンロードリンクがセットされます。

よって、自ら設定する必要はありません。

nuxt.config.jsを開いてheadの中のGoogleFontを削除します。

{
  head: {
  ...
  // 削除
  // {
  //   rel: 'stylesheet',
  //   href:
  //     'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
  //  }
  }
}

Vuetifyページを削除

今現在、"http://localhost:3000/inspire"にアクセスするとVuetifyのロゴが表示されると思います。

これは、アプリ作成時に自動で作られたファイルなので不要です。

pagesディレクトリのinspire.vueを削除してください。

pages
 L inspire.vue		// 削除

新たにVuetify2モジュールをインストールする

それではVuetifyモジュールを導入しましょう。

$ yarn add @nuxtjs/vuetify -D

Vuetify2.0がインストールされたか確認してみましょう。

$ yarn list vuetify

└─ vuetify@2.0.10

これでOKですね。

Vuetify2にFontAwesomeをインストールする

FontAwesomeも導入しましょう。

下のページと全く同じ内容なので、ざっくりと説明しますね。

NuxtにVuetify2を導入してFontAwesomeもインストールするぜ

  • まずモジュールをインストールして、
$ yarn add @fortawesome/fontawesome-free -D
  • vuetify.jsファイルを作成して、
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'
  }
})
  • nuxt.config.jsにpluginsファイルを読み込むように設定します。
nuxt.config.js
{
  ...
  plugins: [
    'plugins/vuetify'
  ],
  ...
}

ここからがUniversalモードの一手間

今のままvuetify.jsを読み込むとビルド時にエラーになります。

SPAモードの場合はこれだけで使えるんですけどね。

nuxt.config.jsbuildに依存関係をBabelで変換するtranspileプロパティを付け加えます。

API: build プロパティ#transpile - Nuxt.js

nuxt.config.js
{
  ...
  build: {
    transpile: ['vuetify/lib'],	// 追記
    extend(config, ctx) {}
  }
}

Babelとは、JavaScriptのコードを新しい書き方から古い書き方へと変換するツールのことのようです。

【5分でなんとなく理解!】Babel入門 - Qiita

SPAモードはブラウザ上で実行するので、わざわざコードを変換しなくてもエラーを吐き出さないのかな?

その代わり稼働がブラウザに依存する、と言う理解で良いと思います。(自信無し)

FontAwesomeが使えるか確認する

さあ、ここまできたらFontAwesomeが使えるか確認しましょう。

index.vueにiconを追加してください。

<template>
  ...
  <v-icon>fas fa-lock</v-icon>
  ...
</template>

Nuxtを起動して"http://localhost:3000/"にアクセスしましょう。

$ yarn dev

2019-08-24 17-08-09

OK!! iconが表示されていますね。

Vuetify2にオリジナルの色を追加する

Vuetify1.xと少し書き方が変わりました。

https://vuetifyjs.com/ja/customization/theme

nuxt.config.jsvuetify部分を以下のように変更してください。

今回はTwitterとfacebookとbackgroundの3つのカラーを追加しました。

nuxt.config.js
import colors from 'vuetify/es5/util/colors' // このimport文がなければエラーになります
{
 ...
 vuetify: {
    theme: {
      themes: {
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          twitter: '#55acee',
          facebook: '#3b5998',
          background: colors.grey.lighten5
        }
      }
    }
  },
  ...
}

試しに、index.vueにTwitterアイコンをTwitterカラーで表示してみましょう。

pages/index.vue
<template>
...
  <v-icon
   color="twitter"
  >
     fab fa-twitter
  </v-icon>
...
</template>

ESLintのルールを変更する(必要であれば)

ルートディレクトリ直下の.eslintrc.jsに独自のルールを追加します。

.eslintrc.js
...
	rules: {
    "no-console": "warn", // console.log "error", "warn", "off"
    "no-trailing-spaces": "warn" // 行の末尾の空白
  }
}

上のコードは

  • console.log()をエラーから注意喚起にする
  • 行の末尾の空白をエラーから注意喚起にする

と言う設定になります。

warn (注意喚起)でも煩わしい方は、offにして完全にエラーを出さない設定にもできます。

その他のESLintカスタマイズはここから見れますよ。

List of available rules - ESLint - Pluggable JavaScript linter

先にこの記事に目を通すと良いかもです。

ESLintのルールを全部手動で設定するのは大変だからやめておけ - Qiita

Phshして本番環境でも確認しよう

さあ、ここまできたらBitbucketにPushしましょう。

$ git add -A
$ git commit -m "Vuetify2_versionUp"
$ git push

Netlifyの管理画面にアクセスすると、先ほどのPushが自動的にデプロイされます。

2019-08-25 17-28-20

BuildingからPublishedに切り替わったら本番環境のURLへアクセスしてみましょう。

Vuetify2のFontAwesomeのアイコンが表示されていたら成功です!

終わりに

FontAwesomeのiconがニュルッと表示されるのが気になるな。。。

今の所解決策が見当たりません。😖 すみません。

さて次回は、Contentfulにブログ記事を管理・作成するプロジェクトを作成していきます。

やっとここまできました。

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