背景

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 です。