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


## 結論

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

## 環境

Nuxt TypeScript Vuetify
node v10.18.1

```json
// 関連ありそうなパッケージだけ
"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

のエラー文があり、該当箇所には[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)が使われていたようだ

Nuxt 側でよしなに[polyfill してくれてなかったけ？](https://github.com/nuxt/nuxt.js/blob/dev/packages/babel-preset-app/src/index.js)
[babel ってくれてる](https://ja.nuxtjs.org/api/configuration-build#babel)
`@nuxtjs/vuetify`が 1.1 系の場合に Edge で見れないって[issue](https://github.com/nuxt-community/vuetify-module/pull/98)があった

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

## やったこと

### vuetify モジュールの update

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

```typescript
  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](https://github.com/nuxt-community/vuetify-module/issues/238)を見つける

> 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 のバージョンをアップデート
[公式に記載されている方法で](https://ja.nuxtjs.org/guide/upgrading/)

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

v2.8 からアップデートする場合は[TypeScript 周りは Nuxt のバージョン上げるだけではダメな模様](https://typescript.nuxtjs.org/ja/migration.html)

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 の修正](https://typescript.nuxtjs.org/ja/migration.html)
- [eslint のルールを推奨されているものに変更する](https://typescript.nuxtjs.org/ja/guide/lint.html)

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 に入れるだけでいいらしい](https://typescript.nuxtjs.org/ja/guide/lint.html)
現状の運用とかけ離れた部分は ignore して、いいやつは取り入れることにした
広範囲に適用されるので気合と根性とコンフリクトの覚悟を持って挑むべし

## 余談

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