Nuxt2.10でTypescriptのプロジェクトを作成する

Nuxt2.9からTypescriptの導入方法がガラッと変わりました。

今回は現在最新のNuxt2.10を新規にインストールし、Typescript化する方法を解説していきます。

Nuxt2.10とタイトルにはありますが、2.9でも同じ手順でTypescript化することができます。

Nuxtのインストール

続いてNuxtを最新版にアップデートします

これでNuxtのインストールは完了したのでTypescript化を行っていきます。
@nuxt/typescript-runtime、@nuxt/typescript-build、@nuxt/typesのインストール

jsconfig.jsonを削除して、以下のtsconfig.jsonを作成する。
今回は階層をスッキリさせるために各種フォルダはsrcフォルダに格納しています。

nuxt.config.jsを削除して、nuxt.config.tsを作成します。

srcフォルダ下にvue-shim.d.tsを追加します。

package.jsonのnuxtコマンドをnuxt-tsに書き換えます。

以上で完了です。
最終的なフォルダ構成は以下のようになります。

nuxt-property-decoratorを使用する場合は別途インストールして使用してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です