Nuxtのバージョンを2.8→2.11にあげた

結論

Nuxt のバージョンアップがつらたんだったってお話
こまめに update しましょう

環境

Nuxt TypeScript Vuetify
node v10.18.1

// 関連ありそうなパッケージだけ
"dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.8.0",
    "ts-node": "^8.2.0",
},
"devDependencies": {
    "@nuxt/typescript": "^2.7.1",
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxtjs/vuetify": "^1.1.0",
}

発端

Edge でアクセスするとローディンググルグルしてて見れないよ
コンソール見てみると

Expected identifier, string or number

のエラー文があり、該当箇所にはスプレッド構文が使われていたようだ

Nuxt 側でよしなにpolyfill してくれてなかったけ？
babel ってくれてる
@nuxtjs/vuetifyが 1.1 系の場合に Edge で見れないってissueがあった

なんだ、Nuxt の vuetify モジュールのアップデートだけでいいじゃあん、なんてそんな甘い考えは以降の作業で打ちのめされた

やったこと

vuetify モジュールの update

最新の安定版まであげてよかったんだけどもとりあえず issue が解決された v1.1.2 に Update
nuxt.config.ts にて vuetify の theme を使ってたのだけども

  vuetify: {
    theme: {
      themes: {
        light: {
          primary: '#00A381',
          sidebar: '#F7FAF9',
          copyright: '#798181',
          menuBg: '#FFFFFF',
          loginBg: '#F7FAF9',
          error: '#F75F4F'
        }
      }
    },
    defaultAssets: {
      font: true,
      icons: 'md'
    }
  },

どうにも vuetify の theme が反映されない・・
open のままのissueを見つける

I upgraded Nuxt.js to the latest version 2.11.0 and now the colors are all working as expected.

マジかよ・・
最新の v2.11 に Nuxt のバージョンあげたら動くよとのこと

Nuxt のバージョンを v2.8→2.11 にアップデート

とりあえず Nuxt のバージョンをアップデート
公式に記載されている方法で

• package.json の nuxt パッケージのバージョンを上げる
• package-lock.json の削除
• node_modules の削除
• npm install
• npm outdated

v2.8 からアップデートする場合はTypeScript 周りは Nuxt のバージョン上げるだけではダメな模様

TypeScript 周りで必要な物をインストールと config の修正

• npm uninstall @nuxt/typescript
• npm uninstall @nuxtjs/eslint-config
• npm install --save-dev @nuxt/typescript-build
• npm install @nuxt/typescript-runtime
• nuxt.config.ts の編集 / tsconfig.json の修正
• eslint のルールを推奨されているものに変更する

package.json の修正
nuxt→nuxt-ts へ変更

   "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate",
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",

nuxt.config.ts の型も変わる

- import NuxtConfiguration from '@nuxt/config'
+ import { Configuration } from '@nuxt/types'

- const nuxtConfig: NuxtConfiguration = {
+ const nuxtConfig: Configuration = {

上記作業中に何かしらエラー(気力なくしてエラーとるの忘れた)が出て
node_modules と package-lock.json を削除して npm i して依存関係を再構築したら直った

eslint の変更

@nuxtjs/eslint-config-typescript を extends に入れるだけでいいらしい
現状の運用とかけ離れた部分は ignore して、いいやつは取り入れることにした
広範囲に適用されるので気合と根性とコンフリクトの覚悟を持って挑むべし

余談

Nuxt v2.11 の方が TypeScript の設定しやすくて良きだし、eslint の config 周りもすっきりしてて大変良き