Nuxt.jsを使ってみる～TypeScriptを導入～

更新日：2019-03-07

Vue.jsでサーバサイドレンダリング(SSR)ができるNuxt.jsを使ってみます。
今回は、TypeScriptを導入します。

※Nuxt.js2.4でTypeScriptがサポートされたのでプロジェクト作成から導入手順を新しく書き直しました。
Nuxt.js 2.4のTypeScript導入手順

TypeScriptの導入

テンプレート取得

前回(Nuxt.jsを使ってみる～Hello World～)のテンプレートを変更ではなく、TypeScriptがすでに導入されているNuxt.jsのテンプレートが存在するのでそれを使用していきます。
以下のコマンドを実行して取得します。

vue init nuxt-community/typescript-template <project-name>

今回は、プロジェクト名「nuxt-typescript-test」で作成していきます。

パッケージバージョン確認

テンプレートは存在しているのですが、Nuxtのバージョンも含め古いバージョンのためアップデートしていきます。

まずはフォルダに移動して「npm install」します。
完了後「npm outdated」でバージョンを確認します。

最新バージョンが存在しているパッケージのアップデートをしていきます。

npm-check-updatesの導入とパッケージのアップデート

「npm update」ではメジャーバージョンのアップデートができないので、一つ一つpackage.jsonから消して「npm install」をする必要があります。
それはさすがに面倒くさいので「npm-check-updates」を導入していきます。
以下のコードで導入します。

npm install -g npm-check-updates

以下のコマンドを叩いてみます。

ncu

先ほどの「npm outdated」と同じように最新バージョンとの差分が表示されました。
問題なければ、以下のコマンドで「package.json」を最新バージョンへ更新します。

ncu -u

「package.json」が変更されています。

「npm install」で再度パッケージをインストールします。

typescript.jsの更新

とりあえず「npm run dev」で起動してみると「TypeError: Cannot set property 'ts' of undefined」というエラーが出ます。

これは、Nuxt.jsが新しくなったことによって、使用しているwebpackが4になったためです。
そのため「modules/typescript.js」を更新します。

以下のように書き換えます。

module.exports = function() {
  this.nuxt.options.extensions.push("ts", 'tsx')
  this.extendBuild(config => {
    config.module.rules.push({
      test: /\.ts?$/,
      loader: "ts-loader",
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    })

    if (!config.resolve.extensions.includes('.ts')) {
      config.resolve.extensions.push('.ts')
    }
    if (!config.resolve.extensions.includes('.tsx')) {
      config.resolve.extensions.push('.tsx')
    }
  })
}

実行

「npm run dev」→「http://localhost:3000」へアクセスで実行できるか確認します。

無事実行できました。

Nuxt.jsを使ってみる ～TypeScriptを導入～