【Migration】Nuxt 2.9がリリースされました🎉【TypeScript】
2019/08/20に nuxt v2.9.0がリリースされました🎉
マイナーアップデートになりますが、様々な修正が含まれています。 実際にTypeScriptで使われている人は、修正が必須となります。
そこで実施した対応や自分で切ったIssueに触れつつ説明してみようと思います。
↓Tweetは以下↓
Nuxt v2.9.0 is out 🥳
— Nuxt.js (@nuxt_js) August 20, 2019
- Typescript support now externalised (https://t.co/AlvY55s0cC)
- Vue Meta upgraded to v2.0
- 10+ bug fixes 🐞
- 10+ new features 🚀https://t.co/vEfQoUWh8l pic.twitter.com/qwmSsEfkxJ
nuxt.jsとは
Nuxt.jsとはVue.jsアプリケーションを作成するフレームワークになります。 以下のアプリケーションを簡単に作成することを補助します。
- ユニバーサルアプリケーション
- 静的に生成されるアプリケーション
- シングルページアプリケーション
また、Nuxt.jsのオフィシャルドキュメントでは
Nuxt.js はサーバーサイドレンダリングをもっと楽しめるように Vue.js アプリケーションの開発に必要な設定をあらかじめプリセットしています。
変更点
- 必須Nodeバージョンが8.9.0へ変更
- TypeScriptのサポートが外部化
- vue-metaパッケージが2.0.0へ更新
- scrollBehavior optionが非推奨に変更
- devModulesオプションが非推奨になり、buildModulesを使うように変更
重要な変更点のみ記載しています。詳細は、リリースを参照すると良いです。
Release v2.9.0 · nuxt/nuxt.js · GitHub
マイグレーション方法
2.8から2.9系へのマイグレーション方法についてオフィシャルには上記となります。
TypeScriptのサポートが外部化 されたため、移行にあたり変更が必須です。
feat: externalize typescript support by kevinmarrec · Pull Request #5858 · nuxt/nuxt.js · GitHub
GitHub - nuxt/typescript: TypeScript Support for Nuxt.js
変更手順
nuxt.config.tsのdevModulesオプションをbuildModulesオプションへリネーム- buildModulesオプションへ
'@nuxt/typescript-build'を追加する @nuxt/vue-appと@nuxt/configを@nuxt/typesへ置き換える- TypeScriptのbuildオプションに
'@nuxt/typescript-build'を追加する @nuxt/typescript-runtimeをインストールするpackage.jsonのscriptをnuxtからnuxt-tsコマンドへ置き換える
Runtime (optional) | Nuxt TypeScript
実際に行った変更
Upgrade nuxt from v2.8.1 to v2.9.1 by paveg · Pull Request #24 · paveg/pwa-portfolio · GitHub
上記PRの中で実際に行った記述を記載しています。 詳しくは見てみると良いかもしれないです。
その際に、よくわからなかったのでIssueも切ってみました。
（半日も経たずコメントが返ってきて、nuxt.jsのコミュニティはクールだなあと思いました）
参照
おわりに
今回の変更はあまり大きいものではないですが、TypeScript + Nuxtで開発をしていてビルドがこけるようになるのでびっくりしました。
ですが、より柔軟なTypeScriptの設定追加などを見越した外部サポート化などの変更だと思うので、サクッとアップデートを行い開発すると良いでしょう。
この記事が、みなさまの参考になれば幸いです！
