自己紹介サイトをNuxt.js 2.9.1 + Vuetify 2.0.xに更新したときの備忘録
猛暑にめげそうだった小語アコだよ、こんばんは。過去に自己紹介サイトを作ったときのことを書いたけど、今回はその続編！
このサイトを作るために使っているNuxt.jsの 2.9 がおととい、Vuetify 2系が7月末にリリースされていたので更新してみました！どちらも公式が公開しているマイグレーションガイド通りにやっていけばスムーズに移行できるから便利だね～。
まずはNuxt.js。私はTypeScriptを使っている（動的型付けが苦手……）からTypeScriptのドキュメントを参考にしました。
nuxt.config.tsにしている場合は@nuxt/typescript-runtimeとnuxt-tsを利用することも忘れずに！以上！やはい！
続いてVuetify！アルカディアが待っていると信じていざー！
1. npm uninstall vuetify stylus stylus-loader
2. npm i -D @nuxtjs/vuetify
3. tsconfig.jsonのtypesプロパティに"@nuxtjs/vuetify"を追加
4. plugins/vuetify.tsで設定していた値をnuxt.config.tsに移植
5. plugins/vuetify.ts削除
6. スタイルファイル.stylを.scssに移行
7. 描画調整（テキストサイズ、footerなど）
Vuetify 2からはstylusではなくsassになったので、まずはstylus系の依存を削除します。そして、Vuetifyを更新…してもいいのですが、Nuxt.jsを使っているのでコミュニティが公開しているNuxt.js用のVuetifyモジュールを導入します。@nuxtjs/vuetifyにはVuetify本体を含む必要なパッケージが依存関係に含まれているので、これひとつをインストールしてしまえばOK！
お次はTypeScript上で型定義を使いたいのでtsconfig.jsonを編集します。
// tsconfig.json
{
...,
"types": [
...,
"@nuxtjs/vuetify"
}そしてnuxt.config.tsを編集！移行前はこんな感じでした。
// before: nuxt.config.ts
import NuxtConfiguration from "@nuxt/config";
...
const config: NuxtConfiguration = {
...
css: ["~/assets/style/app.styl"],
plugins: ["~/plugins/vuetify"],
...これを書き換えます。
// after: nuxt.config.ts
import {Configuration} from "@nuxt/types";
...
// themesでcolorsを使いたいならimportしておこう
import colors from "vuetify/es5/util/colors";
const config: Configuration = {
...
css: [],
plugins: [],
buildModules: [
...,
"@nuxtjs/vuetify"
],
vuetify: {
customVariables: ["~/assets/variables.scss"],
theme: {
themes: {
...
}
}
},
...Vuetifyのsassの設定を変更するためのファイルをvuetifyプロパティのcustomVariablesで設定するようにします。あと、pluginで設定していたthemeなどの設定もここで行うようにしました。結果、cssとpluginsで設定していたファイルは不要になるので削除。あ、もちろんファイルを削除する前にstylusからsassに設定を移植してね！
最後に描画結果を微調整。私の自己紹介サイトの場合だとCardのテキストサイズとfooterのテキスト表示位置がずれていたので調整しました！
これで以上だけど、1点だけ注意点。@nuxtjs/vuetifyはtreeShakeというオプションが用意されているけど、これがtrueになっていないと用意したvariables.scssが組み込まれていないことがあるから注意！常時trueにしておくと開発中のビルドに時間がかかっちゃうから、最終確認段階でNODE_ENVをproductionに設定してビルドするのがいいんじゃないかな？詳細は以下のリンクから辿ってみよう！
これにて移行終わり！引き続き快適Nuxt.js + Vuetify開発をやっていきましょー！
この記事が気に入ったらサポートをしてみませんか？