Nuxt.js(v2.9.2)とTypeScriptの開発環境を作る。

Nuxt.jsとTypeScriptで開発環境を作るときのまとめ。(2019/9/5時点)

お急ぎの方は、 記事中の作業を行ったものをnuxt.ts-templateとしてGitHubのリポジトリに上げたので、cloneないしForkして使ってほしい。

目指すもの

create nuxt-app したときと同じ環境で、下記のものが使えること。 すぐにNuxt.jsとTypeScriptを用いて開発を始められる環境を構築する。

• Nuxt.js v2.9.2
• TypeScript
• ESLint
• nuxt-property-decorator

nuxt-property-decorator (vue-property-decorator)

Nuxt.jsとTypeScriptを組み合わせるときは、nuxt-property-decorator(vue-property-decorator)の利用が推奨されている。^1

もともとのNuxt.jsとは書き方が変わる。参考文献にいくつか載せてあるので、もともとの書き方と比較しながら慣れると良さそう。^2

今回は最後にインストールするので、一つ前のESLintまでで止まればこれを使わない環境も構築できる。

手順

大まかには次の流れで進む。 いくつかハマりどころがあったので、私の環境でうまく行った手順を残しておく。

(特にESLintに文句を言われることが多く、最初いきあたりばったりで進めていたら沢山のパッケージをインストールしてしまった。 この記事は、その後不要なものがあまり入らないようにやり直した内容の記録である。)

1. yarn create nuxt-app
2. TypeScriptを入れる
3. vue-property-decoratorを入れる
4. ESLintを入れる

1. create nuxt-app

Nuxt.jsで環境構築するときにお決まりのcreate-nuxt-app。 yarnだと、 $ yarn create nuxt-app hogehoge とする。

$ yarn create nuxt-app nuxt.ts-template
# yarn create v1.17.3
# create-nuxt-app v2.10.1

# 今回は次のように設定した
# Project name, Project description, Author name は適宜
# package manager : Yarn
# UI framework : None
# custom server framework : None (Recommended)
# Nuxt.js modules :
# test framework : None
# rendering mode : Universal (SSR)
# development tools :

$ cd nuxt.ts-template/
# 以下全てカレントディレクトリは移動しない。編集するファイル名もnuxt.ts-template/をカレントディレクトリとして表記する。

$ yarn dev
# 起動できることを確認。ブラウザからNuxt.jsのロゴが見えればオーケー。(以下の起動確認も同様。)

2. Install TypeScript

まず、TypeScriptに関するパッケージをインストールする。

$ yarn add -D @nuxt/typescript-build
$ yarn add @nuxt/typescript-runtime @nuxt/types
$ mv nuxt.config.js nuxt.config.ts
$ touch tsconfig.json

TypeScriptに合わせて以下の設定ファイルを2つ、ソースを3つ書き換える。

• package.json
• tsconfig.json (新たに作成)
• nuxt.config.ts
• index.vue
• Logo.vue

./package.json

...
   "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate"
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate"
   },
...

./tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

./nuxt.config.ts

+import {Configuration} from '@nuxt/types'

-export default {
+const nuxtConfig: Configuration = {
...
  buildModules: [
+      '@nuxt/typescript-build'
  ],
...
}
+module.exports = nuxtConfig

./pages/index.vue

-<script>
+<script lang="ts">

./components/Logo.vue

...
</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({  
+})
+</script>
+
<style>
...

$ yarn dev
# TypeScriptで動くことを確認。

3. ESlint

ESLintと関連パッケージをインストールする。(今回はcreate nuxt-appでESLintをインストールしていないのでESLint自体もここでインストールする。)

$ yarn add eslint-config eslint
$ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript
$ touch .eslintrc.js

ESLintの設定を以下の3ファイルに記述する。

• package.json
• nuxt.config.ts
• .eslintrc.js

package.json

...
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
-    "generate": "nuxt-ts generate"
+    "generate": "nuxt-ts generate",
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
+    "lint:fix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore . --fix"
  },
...

nuxt.config.ts

...
  build: {
    /*
    ** You can extend webpack config here
    */
+    /*
    extend (config, ctx) {
    }
+   */
...

.eslintrc.js

module.exports = {
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error'
  }
}

$ yarn lint:fix
$ yarn dev
# Lintが動いていることと、変わらず起動できることを確認。

4.nuxt-property-decorator

nuxt-property-decoratorをインストールする。(vue-property-decoratorでも良いかもしれない。)

$ yarn add nuxt-property-decorator

nuxt-property-decoratorに合わせて2ファイルを変更する。

• tsconfig.json (デコレータの使用を宣言する。)
• index.vue (デコレータを使った書き方に修正する。)

./tsconfig.json

...
    "compilerOptions": {
...
      "types": [
        "@types/node",
        "@nuxt/types"
-      ]
+      ],
+      "experimentalDecorators": true
    },
...

./pages/index.vue

...
<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'

-export default {
+@Component({
  components: {
    Logo
  }
-}
+})
+export default class Index extends Vue {
+}
</script>
...

$ yarn dev
# デコレータを使った表記での起動を確認。

お疲れさまでした。

参考

重要参考文献

1. Qiita Nuxt.js 2.9でのTypeScript対応
2. Nuxt TypeScript Setup

その他の参考文献

1. Nuxt.js インストール ... yarn create nuxt-app について
2. GitHub eslint-config ... eslint-configのセットアップ
3. デコレータ | TypeScript 日本語ハンドブック | js STUDIO ... experimentalDecoratorsについて
4. TypeScriptではじめるVueコンポーネント（vue-class-component）... vue-property-decorator(nuxt-property-decorator)を使った@Componentデコレータの書き方
5. Nuxt.js+ExpressのプロジェクトをTypeScript化する ... nuxt-property-decoratorを使った@Componentデコレータの書き方
6. はじめてのvue-property-decorator ... vue-property-decorator(nuxt-property-decorator)を使ったデコレータの書き方

---

• ^1: Nuxt.js TypeScriptサポートに書かれている。(Nuxt.js v2.8までの記述のため、このページの内容のとおりではv2.9.2ではうまく行かない)
• ^2: GitHub vue-property-decoratorに記載がある。