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

はじめに

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

構築する環境

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

• Nuxt
• eslint
• prettier
• TypeScript
• Vuetify

create-nuxt-appでプロジェクトを作ろう

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

# 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

各自、項目を選択してください。

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

# npm
$ npm i -D @nuxt/typescript @nuxt/config ts-node

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

各パッケージの詳細

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

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

引用元：https://ja.nuxtjs.org/guide/typescript/

tsconfig.jsonを作ろう

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

# npm
$ npm run dev

# yarn
$ yarn dev

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

完成した`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",
      "vuetify"
    ]
  }
}

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が使えるので型を使って補完を効くようにしましょう。

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

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

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

export default Config

最後にエラー対策をしよう

nuxt.config.tsのbuildsプロパティのextend関数を編集しましょう。

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)/
        })
      }
    }
  }
}

これで移植を完了です。

お疲れ様です

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