今回達成すること
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ディレクトリにある
assets
L style
L app.styl // 削除
L variables.styl // 削除
headプロパティのGoogleFontを削除
@nuxtjs/vuetifyでは、GoogleFontのダウンロードリンクがセットされます。
よって、自ら設定する必要はありません。
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ディレクトリの
pages
L inspire.vue // 削除
新たにVuetify2モジュールをインストールする
それではVuetifyモジュールを導入しましょう。
$ yarn add @nuxtjs/vuetify -D
Vuetify2.0がインストールされたか確認してみましょう。
$ yarn list vuetify
└─ vuetify@2.0.10
これでOKですね。
Vuetify2にFontAwesomeをインストールする
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モードの一手間
今のまま
SPAモードの場合はこれだけで使えるんですけどね。
buildに依存関係をBabelで変換するtranspileプロパティを付け加えます。
nuxt.config.js
{
...
build: {
transpile: ['vuetify/lib'], // 追記
extend(config, ctx) {}
}
}
Babelとは、JavaScriptのコードを新しい書き方から古い書き方へと変換するツールのことのようです。
SPAモードはブラウザ上で実行するので、わざわざコードを変換しなくてもエラーを吐き出さないのかな?
その代わり稼働がブラウザに依存する、と言う理解で良いと思います。(自信無し)
FontAwesomeが使えるか確認する
さあ、ここまできたらFontAwesomeが使えるか確認しましょう。
<template>
...
<v-icon>fas fa-lock</v-icon>
...
</template>
Nuxtを起動して"http://localhost:3000/"にアクセスしましょう。
$ yarn dev
OK!! iconが表示されていますね。
Vuetify2にオリジナルの色を追加する
Vuetify1.xと少し書き方が変わりました。
vuetify部分を以下のように変更してください。
今回は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
}
}
}
},
...
}
試しに、
pages/index.vue
<template>
...
<v-icon
color="twitter"
>
fab fa-twitter
</v-icon>
...
</template>
ESLintのルールを変更する(必要であれば)
ルートディレクトリ直下の
.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
先にこの記事に目を通すと良いかもです。
Phshして本番環境でも確認しよう
さあ、ここまできたらBitbucketにPushしましょう。
$ git add -A
$ git commit -m "Vuetify2_versionUp"
$ git push
BuildingからPublishedに切り替わったら本番環境のURLへアクセスしてみましょう。
Vuetify2のFontAwesomeのアイコンが表示されていたら成功です!
終わりに
FontAwesomeのiconがニュルッと表示されるのが気になるな。。。
今の所解決策が見当たりません。:confounded: すみません。
さて次回は、Contentfulにブログ記事を管理・作成するプロジェクトを作成していきます。
やっとここまできました。