【公式準拠】Nuxt.js v2.12 系の TypeScript 導入手順

最新の Nuxt.js v2.12 系では TypeScript の導入が CLI でできるようになり、とても簡単になっています。(以前は JavaScript プロジェクトから TypeScript 用に色々と設定変更が必要でした)

1. 環境

shell

> node -v
v10.18.1

> npm -v
6.13.4

最終的な依存関係一覧

"dependencies": {
    "nuxt": "^2.12.1"
},
"devDependencies": {
    "@nuxt/typescript-build": "^0.6.1"
}

2. Nuxt.js のプロジェクトを生成

Nuxt.js の CLI は create-nuxt-app で実行できます。なお、npm でグローバルにインストールしなくても npx コマンドで一時利用が可能となっています。

(1) npx create-nuxt-app コマンドでプロジェクトを作成

// Shell
$ npx create-nuxt-app sample1

※ sample1 はプロジェクト名のため各々変更してよい

(2) プロジェクトのパラメータ指定

Choose programming language で JavaScript と TypeScript を選択可能です。

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name                      > sample1
? Project description               > My astonishing Nuxt.js project
? Author name                       > hikaru
? Choose programming language       > TypeScript  ＜ここでTypeScript指定可能＞
? Choose the package manager        > Npm
? Choose UI framework               > Vuetify.js
? Choose custom server framework    > None (Recommended)
? Choose the runtime for TypeScript > Default
? Choose Nuxt.js modules            > Axios, PWA, DotEnv
? Choose linting tools              > None
? Choose test framework             > Jest
? Choose rendering mode             > Single Page App

(3) カレントディレクトリを移動

// Shell
> cd sample1

これで、レイアウト、コンポーネント、プラグイン、ミドルウェアなどで TypeScript が使用できるようになりました。

3. 動作確認

最後に確認のために以下のコマンドでデバッグ実行して http://localhost:3000 にて動作が確認できれば完了です。

// Shell
> npm run dev