Nuxt.js + Typescriptの環境をフルスクラッチで作ってみた

どうも、副業フリーランサーの刀根です。今回は個人的にNuxtをいじろうと思ったので、環境構築の内容を記事にしてみました。
意外とフルスクラッチで環境構築している記事が見つからなかったので、参考になれば幸いです。

deprecated!!

この記事の内容はちょっと古めの内容になりました。
最新のnuxt + typescriptの環境構築はこちらを参照してください

TL;DR

Nuxt.js + TypeScriptの開発環境を、create-nuxt-appなどのテンプレート生成を利用せずにフルスクラッチで作ってみました。
今回のゴールは、npm run lint でlintをかけられるようになるところまでやっていきます。

先ずは公式のガイドを参考にして作っていく

公式のインストール方法(英語)の下の方に、Starting from scratchという章があるのでその内容に従う。

まずはフォルダを作成し、その中に移動。

mkdir my-project
cd my-project

そして、 npm initでpackage.jsonを生成する。（途中の質問はEnter連打ですっ飛ばしてOK）

その後、scripts内に、nuxtを起動するscriptを設定("dev": "nuxt")

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "nuxt", #この行を追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  中略
}

そしてnuxtをインストール

npm i --save nuxt

公式ドキュメント通り、pages/index.vueを作成

mkdir pages
touch pages/index.vue

index.vue

<template>
  <h1>Hello world!</h1>
</template>

ここまでできたら、一度起動してみる。

npm run dev

localhost:3000にアクセスすれば

成功。

Typescript対応

公式のtypescript化方法の通りに進めていく。

まずはパッケージをインストール

npm i -D @nuxt/typescript
npm i ts-node

さらにtsconfig.jsonを作成する。ちなみに中身は空でよく、nuxtを実行した際に勝手に値が入ります。

touch tsconfig.json

さらに、nuxt.config.tsを作成。こちらは中身が空ではダメです。

nuxt.config.ts

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // Type or Press `Ctrl + Space` for autocompletion
}

export default config

ESLintのインストール・設定

引き続きこちらを参考にして進めていく。

まずは、必要なパッケージをインストール

npm install --save-dev eslint @nuxtjs/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser

次に、eslintrc.jsを作成。

eslintrc.js

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

その後、scripts内に、lintを走らせるscriptを設定("lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .")

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "nuxt", 
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .", #この行を追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  中略
}

Gitの設定

最後に、.gitignoreがないとlintでエラー吐かれてしまうので最低限のgitの設定だけしてしまいましょう。

git init
touch .gitignore

.gitignore

node_modules
.nuxt

以上で設定は終了です。npm run lintでちゃんとlintが動作するかどうか、npm run devでHello worldができるかどうか確かめてみましょう。

もし「書かれている通りにやったのに動かない！」とかその他諸々ありましたら遠慮なくコメントください。