Nuxt.js v2.5 + TypeScriptでプロジェクトをはじめる #JavaScript

Nuxtがv2.5から標準でTypeScriptに対応したので、Nuxt + TypeScriptでプロジェクトを始めようとした際、自分好みに使っていくにはけっこう設定等が必要だったので忘れないように手順を書き残そうと思います。なお、既存のNuxtアプリケーションをTS化するわけではなくあくまで新規プロジェクト作成を前提としています。

プロジェクト作成

まずは手っ取り早くcreate nuxt-appで新規プロジェクトを作成します。

$ yarn create nuxt-app nuxt-ts-sample

いろいろ聞かれます。

? Project name (nuxt-ts-sample)

Enterを押す。

? Project description (My pioneering Nuxt.js project)

Enterを押す。

? Use a custom server framework
❯ none
  express
  koa
  adonis
  hapi
  feathers
  micro

noneにカーソルをあててEnterを押す。

? Choose features to install
 ◉ Progressive Web App (PWA) Support
 ◉ Linter / Formatter
 ◉ Prettier
❯◉ Axios

全部チェックつけます。

? Use a custom UI framework (Use arrow keys)
❯ none
  bootstrap
  vuetify
  bulma
  tailwind
  element-ui
  buefy

これもなんでも。今回はnoneにします。

? Use a custom test framework (Use arrow keys)
  none
❯ jest
  ava

これもなんでも。jest選んでおきます。

? Choose rendering mode (Use arrow keys)
❯ Universal
  Single Page App

これもなんでも。Universal選んでおきます。

? Author name (keiichirosoeda)

必要であれば書き換えて、Enterを押す。

? Choose a package manager (Use arrow keys)
  npm
❯ yarn

yarn派なのでyarnを選んでEnter。

ようやくソースコードがダウンロードされます。

まずはビルド

srcディレクトリを作成

個人的に、srcディレクトリにコードをまとめるのが好きなので、各ディレクトリをsrcに移動します。

$ cd nuxt-ts-sample
$ mkdir src
$ mv assets components layouts middleware pages plugins server static store test src

`nuxt.config.js`でソースのディレクトリを指定。

nuxt.config.jsに一行加えてsrcDirを変更します。

nuxt.config.js

module.exports = {
  srcDir: 'src/',
  // ...
};

一度ビルドして立ち上げてみます。

$ yarn dev

http://localhost:3000/ へアクセスし、以下画面がでれば問題ないです。

TypeScript化

では早速TypeScriptで書きかえていきます。

必要なパッケージをインストール

まずはじめに必要なパッケージをインストールします。create nuxt-appでプロジェクト作成すると、2.4系のnuxtがインストールされてしまうので（2019年3月現在）、2.5系をインストールするためnuxtも再度yarn addします。

$ yarn add nuxt vue-property-decorator
$ yarn add -D @nuxt/typescript

`tsconfig.json`を作成してビルド

yarn devすると、TypeScriptの設定ファイルが自動で書き込まれます。そのためにまず元となるtsconfig.jsonを作成します。

$ echo {} > tsconfig.json

ビルドします。

$ yarn dev

以下のようにtsconfig.jsonが上書きされます。

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "*"
      ],
      "@/*": [
        "*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

`tsconfig.json`を修正

ソースコード内で~/xxx, ~@xxxのようにディレクトリ指定できるようにTSのコンパイル設定を修正します。

tsconfig.json

{
  "compilerOptions": {

    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "*"
      ],
      "@/*": [
        "*"
      ]
    },

  }
}

`pages/index.vue`をTS化

pages/index.vue

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

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

ESlintの設定を修正

TypeScriptで書けるようにESlintの設定を修正します。

プラグインのインストール

$ yarn add -D @typescript-eslint/eslint-plugin

.eslintrc.jsを修正。

eslintrc.js

module.exports = {
  // ...
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  // ...
  plugins: [
    'prettier',
    '@typescript-eslint' // 追加
  ],
  // ...
  rules: {
    'nuxt/no-cjs-in-config': 'off',
    'no-unused-vars': 'off',
    'no-unused-expressions': 'off'
  },
  // ...
}

再ビルド

$ yarn dev

再度画面が立ち上がれば、Nuxt + TypeScriptアプリケーションのひな形完成です！

おわりに

lintの設定はお好みで追加・変更していただければと。
具体的なTypeScriptでの実装についても、近いうちに書けたらと思います。vuexなど。

Nuxt.js v2.5 + TypeScriptでプロジェクトをはじめる