nuxt.js × typescriptの使いかた

f:id:nepio:20181002170250p:plain

最近流行りのnuxt.js実際どうなのと気になったので少しだけ触り方を調べてみました。

インストールと初期プロジェクトの作成

nuxt.jsの過去のバージョンであるv1.3系と最新のv2.0で環境構築手順が異なります。

nuxt.js 1.3

v1.3系はテンプレートが準備されており、 以下のコマンドでインストール可能です。

$ vue init nuxt-community/typescript-template <my-project>

nuxt.js 2.0系

create-nuxt-appを利用してそれからtypescriptを導入します。

$ npx create-nuxt-app {PROJECT_NAME}

色々効かれると思うのでお好みの名前を設定します。

次にtypescriptを導入します。

$ yarn add --dev ts-loader typescript @types/node

そしてwebpackの設定をunxt.config.jsとmodules/typescript.jsに追加します。

(nuxtはこれらの設定を見て、webpackのコンフィグを自動生成してくれます。)

// nuxt.config.jsに以下の行を追記

  modules: [
    '~~/modules/typescript'
  ],
// modules/typescript.js
export default function () {
  this.nuxt.options.extensions.push('ts')
  this.extendBuild((config) => {
    const tsLoader = {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/]
      },
      exclude: [
        /dist/,
        /\.temp/
      ]
    }
    config.module.rules.push(
      Object.assign(
        {
          test: /((client|server)\.js)|(\.tsx?)$/
        },
        tsLoader
      )
    )
    if (config.resolve.extensions.indexOf('.ts') === -1) {
      config.resolve.extensions.push('.ts')
    }
  })
}

最後にnuxt-class-decoratorとvuex-classを追加します。

$ yarn add nuxt-property-decorator
$ yarn add vuex-class

typescriptのコードの書き方

lang="ts"というtype指定でscriptタグを記述するとOKです。