背景
- Nuxt.js のアプリケーションを作成するときは
create-nuxt-appコマンドで作ることが多いものの、まだ TypeScript の導入まで簡単にできるようになっていないため、その導入手順をまとめます。
Nuxt アプリの導入
create-nuxt-app でアプリの雛形を作ります。
プロジェクトに合わせてお好みの設定を選んで導入しましょう。
$ npx create-nuxt-app nuxt-sample
create-nuxt-app v2.10.1
✨ Generating Nuxt.js project in nuxt-sample
? Project name nuxt-sample
? Project description My stellar Nuxt.js project
? Author name mc-chinju
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework Express
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
...
🎉 Successfully created project nuxt-sample
ライブラリの更新
npm-check-updates コマンドの導入
最新のライブラリバージョンになっているかを一括でチェックする ncu コマンドを使うために、このライブラリを導入します。
$ npm install -g npm-check-updates
次に先ほど作成した nuxt-sample のディレクトリで ncu を実行してみます。
$ ncu
Checking /Users/chinju/Desktop/nuxt-sample/package.json
[====================] 19/19 100%
nuxt ^2.0.0 → ^2.9.2
cross-env ^5.2.0 → ^6.0.0
express ^4.16.4 → ^4.17.1
@nuxtjs/axios ^5.3.6 → ^5.6.0
nodemon ^1.18.9 → ^1.19.2
@nuxtjs/vuetify ^1.0.0 → ^1.8.5
@nuxtjs/eslint-config ^1.0.1 → ^1.1.2
@nuxtjs/eslint-module ^1.0.0 → ^1.1.0
babel-eslint ^10.0.1 → ^10.0.3
eslint ^6.1.0 → ^6.4.0
eslint-plugin-nuxt >=0.4.2 → >=0.4.3
eslint-config-prettier ^4.1.0 → ^6.3.0
eslint-plugin-prettier ^3.0.1 → ^3.1.1
prettier ^1.16.4 → ^1.18.2
babel-jest ^24.1.0 → ^24.9.0
jest ^24.1.0 → ^24.9.0
Run ncu -u to upgrade package.json
こんな感じで、nuxt 自体のバージョンも最新ではなく 2.0.0 であることがわかりますね。
次に -u オプションを渡して、package.json を書き換えるようにします。
$ ncu -u
Upgrading /Users/chinju/Desktop/nuxt-sample/package.json
[====================] 19/19 100%
nuxt ^2.0.0 → ^2.9.2
cross-env ^5.2.0 → ^6.0.0
express ^4.16.4 → ^4.17.1
@nuxtjs/axios ^5.3.6 → ^5.6.0
nodemon ^1.18.9 → ^1.19.2
@nuxtjs/vuetify ^1.0.0 → ^1.8.5
@nuxtjs/eslint-config ^1.0.1 → ^1.1.2
@nuxtjs/eslint-module ^1.0.0 → ^1.1.0
babel-eslint ^10.0.1 → ^10.0.3
eslint ^6.1.0 → ^6.4.0
eslint-plugin-nuxt >=0.4.2 → >=0.4.3
eslint-config-prettier ^4.1.0 → ^6.3.0
eslint-plugin-prettier ^3.0.1 → ^3.1.1
prettier ^1.16.4 → ^1.18.2
babel-jest ^24.1.0 → ^24.9.0
jest ^24.1.0 → ^24.9.0
Run npm install to install new versions.
これで package.json が更新されました。
npm install しろと言われていますが、yarn を選択したので yarn で導入します。
$ yarn install
これで更新完了です。
TypeScript の導入
次に TypeScript を導入していきます。
Nuxt 公式の TypeScript サポート によると、TypeScript を完全にサポートしていると明言しています。
公式のドキュメント によると 2019/9/26 現在、Nuxt 2.9 以降のバージョンでのみ指定されているライブラリを利用することを想定しているようです。
Nuxt TypeScript Support comes with 3 packages :
中略
These packages are intended to only be used with Nuxt 2.9 or above.
なので、create-nuxt-app を実行した直後の Nuxt のバージョンでは対応できなかったので、ncu でのライブラリの更新を行いました。
バージョンの問題は解決済みなので、あとは公式ドキュメント通りに導入を行えば OK です。