N-LAB

Nuxt 3プロジェクトの作成とTypeScript・ESLintの設定


目標


前提


目次

  1. Nuxt 3プロジェクトの作成
  2. ソースディレクトリの変更
  3. TypeScriptの設定
  4. ESLintの設定


Nuxt 3プロジェクトの作成

1. 以下のコマンドでNuxt 3プロジェクトを新規作成します。

$ npx nuxi init <project-name>

※<project-name>には任意のプロジェクト名を入力します。

2. 「y」を入力し、Enterキーを押下します。

Need to install the following packages:
  nuxi
Ok to proceed? (y) y


3. インストール完了後は以下が表示されていることを確認します。

Nuxi 3.4.3
✨ Nuxt project is created with v3 template. Next steps:
 › cd nuxt3-sample
 › Install dependencies with npm install or yarn install or pnpm install
 › Start development server with npm run dev or yarn dev or pnpm run dev  


4. 作成したプロジェクトへ移動します。

$ cd <project-name>

※初期状態では以下のようなディレクトリ構成になります。

<project-name>
├── public/
├── .gitignore
├── .npmrc
├── app.vue
├── nuxt.config.ts
├── package.json
├── README.md
└── tsconfig.json


5. 各種依存パッケージをインストールします。

$ npm install
Nuxi 3.4.3
✔ Types generated in .nuxt
added 623 packages, and audited 624 packages in 2m
104 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities


6. プロジェクトを起動します。

$ npm run dev
Nuxi 3.4.3
Nuxt 3.4.3 with Nitro 2.3.3
  > Local:    http://localhost:3000/ 
  > Network:  http://172.20.10.2:3000/
ℹ Vite client warmed up in 728ms
✔ Nitro built in 325 ms  


7. 次のURLにアクセスし、ページが表示されていることを確認します。
http://localhost:3000


ソースディレクトリの変更


1. 「src」ディレクトリを作成します。

$ mkdir src 


2. 「nuxt.config.ts」に以下を追加して上書き保存します。

// nuxt.config.ts
export default defineNuxtConfig({
  srcDir: 'src/'
});


3. 「src」ディレクトリへ移動します。

$ cd src 


4. 「pages」ディレクトリを作成します。

$ mkdir pages 


5. 「pages」ディレクトリ内に「index.vue」ファイルを新規作成し、以下の内容で保存します。

<script lang="ts" setup></script>

<template>
  <div>
    <h1>
      Pages/index.vue
    </h1>
  </div>
</template>


6. プロジェクトを起動します。

$ npm run dev


7. 次のURLにアクセスします。「src/pages/index.vue」の内容が表示されていることを確認します。
http://localhost:3000

TypeScriptの設定


1. パッケージをインストールします。

$ npm install --save-dev typescript vue-tsc


2. 「nuxt.config.ts」に以下の項目を追加します。

// nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    shim: false,     // shimsファイル生成の無効化（VSCodeでVolarを使う場合はfalseにする）
    strict: true,    // 型チェックを厳格化
    typeCheck: false // nuxt devまたはnuxt build時に型チェックを実行
  },
});

各オプションの詳細は以下を参照ください。
https://nuxt.com/docs/api/configuration/nuxt-config#typescript

3. vue-tscを利用した型チェックを行うには以下のコマンドを入力します。

$ npx nuxi typecheck
Nuxi 3.4.3
src/pages/index.vue:3:1 - error TS2322: Type 'number' is not assignable to type 'string'.
3 str = 0

※型エラーが検出された場合は、上記のように検出箇所が出力されます。上記コマンドの詳細に関しては以下を参照ください。
https://nuxt.com/docs/api/commands/typecheck

ESLintの設定

1. パッケージをインストールします。

$ npm install --save-dev @nuxtjs/eslint-config-typescript eslint


2. プロジェクトのルート配下に「.eslintrc」を新規作成して、以下を追加します。

{
  "extends": [
    "@nuxtjs/eslint-config-typescript"
  ]
}


3. 「package.json」の「scripts」に以下の2項目を追加します。

{
  "scripts": {
    "lint": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
    "lint:fix": "npm run lint -- --fix"
  }
}


4. 以下のコマンドでESLintを実行し、ソース解析を行います。

$ npm run lint


5. ソースの解析とソースの修正も同時に行うには以下のコマンドを入力します。

$ npm run lint:fix



以上で全ての手順は完了になります