Nuxt.js(prettier, eslint) + TypeScript + Vuetifyの環境を作ろう

# はじめに
この記事では**Nuxt.js(prettier, eslint) + TypeScript + Vuetifyの環境**を作るための手順を紹介します。

# 構築する環境
今回、構築する環境は以下のとおりです。

- Nuxt
- eslint
- prettier
- TypeScript
- Vuetify

# `create-nuxt-app`でプロジェクトを作ろう
`create-nuxt-app`は簡単にNuxtの雛形を手元に構築できるコマンドです。
インストールしていない方はインストールしましょう。

```bash
# create-nuxt-appのインストール

# npm
$ npm install -g create-nuxt-app

# yarn
$ yarn global add create-nuxt-app
```

次にプロジェクトを作成しましょう。

```
# create-nuxt-appでプロジェクトを作成
$ create-nuxt-app <project_name>

? Project name <project_name>
? Project description My cat's pajamas Nuxt.js project
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support, Linter / Formatter, Prettier, Axios
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Universal
```
各自、項目を選択してください。

# 必要なパッケージをインストールしよう
```bash
# npm
$ npm i -D @nuxt/typescript @nuxt/config ts-node

# yarn
$ yarn add -D @nuxt/typescript @nuxt/config ts-node
```

<details><summary>各パッケージの詳細
</summary><div>
>  `@nuxt/typescript` は TypeScript ファイルのコンパイルと型チェックを別のプロセスで行うのに必要な TypeScript 関連の依存関係を持っています。

>  `ts-node` は `nuxt.config.ts` と `serverMiddlewares` をサポートする TypeScript ランタイムを有効化するため `@nuxt/core` を拡張します。

> 引用元：<https://ja.nuxtjs.org/guide/typescript/>
</div></details>

# `tsconfig.json`を作ろう
作成したプロジェクトのディレクトリに`tsconfig.json`を作成してください。
中身は空のままで、開発サーバーを立ててください。

```bash
# npm
$ npm run dev

# yarn
$ yarn dev
```

サーバーの立ち上げが終わったら`tsconfig.json`を確認し、`types`に`"vuetify"`を追加してください。

<details>
<summary>完成した`tsconfig.json`</summary><div>

```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",
      "vuetify"
    ]
  }
}
```
</div></details>

# `nuxt.config.js`を`nuxt.config.ts`にしよう
プロジェクトのディレクトリにある`nuxt.config.js`の名前を`nuxt.config.ts`に変更してください。
次にTypeScriptへの移植を行います。

## まず最初の`import`している部分を編集しよう

```nuxt.config.ts
import NuxtConfiguration from '@nuxt/config'
import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin'
const pkg = require('./package.json')

// 省略
```

## 次に設定項目を変数化しよう
すでに`export default { ~ }`で設定項目が記述されていますが、せっかくTypeScriptが使えるので型を使って補完を効くようにしましょう。

```TypeScript
export default {~}
// ↓ ~ の部分は同じでexport defaultをconst Config: NuxtConfiguration =に置換してください。
const Config: NuxtConfiguration = {~}
```

## 最後に設定項目を`export`しよう

```TypeScript
// 〜省略〜
const Config: NuxtConfiguration = { /*省略*/ }

export default Config
```

## 最後にエラー対策をしよう
`nuxt.config.ts`の`builds`プロパティの`extend`関数を編集しましょう。

```diff

const Config: NuxtConfiguration = {
  // 〜省略〜
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
+       if (!config.module) return
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}
```

これで移植を完了です。

# お疲れ様です
以上で環境の構築が完了しました。
誤字脱字がありましたらご指摘お願いします。