nuxtのie対応

2020年はもうIE対応なんていらないんじゃないかと思えるが、NuxtをIEで動作させる為にどうしたら良いか調べても、公式的な記述を見つける事が出来なかったので記す。

よく見るやり方

よく見るやり方はpolyfill系をheadオプションで付け加える。Qiitaでもhatenaでもstackoverflowでもよく見る。
polyfill.ioからか、あんま見なかったけどbabel-polyfillを入れる。これで動作はする。

nuxt.config.js

export default {
  head: {
    script: [
      { src: 'https://polyfill.io/v3/polyfill.min.js' },
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.7/polyfill.min.js' },
    ]
  }
}

https://polyfill.io/v3/
https://cdnjs.com/libraries/babel-polyfill

babel-polyfillじゃないの？

nuxtはbabelで動作しているので、babel-polyfillが使えるような設定あるんじゃないの？と疑問に思った。すると公式ドキュメントにbabel-preset-envというものがあると知る。
それがこちら
https://ja.nuxtjs.org/api/configuration-build/#babel
https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app

記述しなくてもデフォルトで動作するようだし、なんならIE9でも動くんじゃないかと思えるが、npm run devでもnpm run build && npm run startでも動かない。さっぱりわからなくなった。よく見るやり方で終わらせようかと悩んでも、じゃあnuxtにあるbabel-preset-envは一体何のためなのだと。

modern プロパティが正解

丸2日インターネットを彷徨った結果、思いっきりドキュメントに書いてありました。全然気づかなかった。
https://ja.nuxtjs.org/api/configuration-modern

デフォルト: false
'server' または true: Node.js サーバがユーザエージェントをベースにブラウザのバージョンをチェックして、対応したモダンかレガシーどちらかのバンドルを配信するでしょう。

私はmodeがuniversalなのでtrueと記述した。
npm run devでは動作しない。npm run build && npm run startである必要がある。

nuxt.config.js

export default {
  modern: true
}

一先ずIE11で動作した。

spaの場合はclientでないと動作しないのだろうか。
mode: spa, modern: clientだとnpm run devは動くのかな？