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

投稿日：2023/05/09

目標

Nuxt 3プロジェクトを新規作成し、TypeScriptとESLintの設定をする。

前提

Nuxtのバージョンは2023年5月4日時点の最新バージョン（3.4.3）をインストールします。
エディタはVisual Studio Codeを使用し、拡張機能のVolarをインストールしている想定とします。

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の設定

Nuxt 3ではデフォルトでTypeScriptが導入されていますが、型チェックを厳格化するために「vue-tsc」をインストールします。「vue-tsc」を利用することで、vueファイル内の<template></template>内のコードの型チェックもできるようになります。

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

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

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

投稿日：2023/05/09

目標

Nuxt 3プロジェクトを新規作成し、TypeScriptとESLintの設定をする。

前提

Nuxtのバージョンは2023年5月4日時点の最新バージョン（3.4.3）をインストールします。
エディタはVisual Studio Codeを使用し、拡張機能のVolarをインストールしている想定とします。

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の設定

Nuxt 3ではデフォルトでTypeScriptが導入されていますが、型チェックを厳格化するために「vue-tsc」をインストールします。「vue-tsc」を利用することで、vueファイル内の<template></template>内のコードの型チェックもできるようになります。

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時に型チェックを実行
  },
});

$ 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

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

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

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

目標

前提

目次

Nuxt 3プロジェクトの作成

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

TypeScriptの設定

ESLintの設定

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

目標

前提

目次

Nuxt 3プロジェクトの作成

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

TypeScriptの設定

ESLintの設定