【Nuxt3】Nuxt3+ESLint+Prettier+TailwindCSS+GitHub Pagesでの環境構築【2022年12月版】

## はじめに

[前回の記事](https://qiita.com/airRnot1106/items/db691b353a78543ba55e)では、Vite+Vue3での環境構築を行いましたが、やはりNuxtにも進出したいと思い試してみたら成功したので備忘録として残します。また、eslintでは私が普段使用している設定にしています。

## 環境

```:環境
VSCode: v1.72.2
yarn: v1.22.18

"@nuxtjs/eslint-config-typescript": "^12.0.0",
"@typescript-eslint/eslint-plugin": "^5.45.1",
"@typescript-eslint/parser": "^5.45.1",
"autoprefixer": "^10.4.13",
"eslint": "^8.29.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-tailwindcss": "^3.7.1",
"eslint-plugin-vue": "^9.8.0",
"nuxt": "3.0.0",
"postcss": "^8.4.19",
"prettier": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.0",
"tailwindcss": "^3.2.4",
"typescript": "^4.9.4"
```

## 導入

### Nuxt3

今回作成するプロジェクト名はnuxt-templateとする
以下のコマンドを作成したいディレクトリで実行

```bash
npx nuxi init nuxt-template
```

```bash
cd nuxt-template/
```

```bash
yarn install
```

次に、`nuxt.config.ts`を以下のように編集

```ts:nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  srcDir: 'src', // componentsやpagesなどのディレクトリを置く場所を指定
});
```

また、`src`ディレクトリを作成し、`app.vue`をその中に移動する

さらに、TypeScriptの型を強化したいので、`tsconfig.json`に以下の内容を追記(お好み)

```json:tsconfig.json
{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true
  }
}
```

### TailwindCSS

以下のコマンドを実行

```bash
yarn add -D tailwindcss autoprefixer postcss
```

次に、プロジェクトのルート(nuxt.config.tsと同じ階層)に`tailwind.config.js`を作成し、以下のように編集

```js:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/components/**/*.{js,vue,ts}',
    './src/layouts/**/*.vue',
    './src/pages/**/*.vue',
    './src/plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './src/app.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

※`content`の中身については各自で設定。なお、ここではpathのaliasの@や~は使用できない模様

次に、`src`に`assets`ディレクトリを作成し、その中に`css`ディレクトリを作成し、その中に`main.css`を作成する
内容を以下のように編集

```css:src/assets/css/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

次に、`nuxt.config.ts`に以下を追記

```ts:nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  srcDir: 'src',
  /* 以下を追記 */
  css: ['@/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});
```

### ESLint + Prettier

以下のコマンドを実行

```bash
yarn add -D eslint eslint-config-prettier eslint-plugin-import eslint-plugin-tailwindcss eslint-plugin-vue prettier prettier-plugin-tailwindcss @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
```

※tailwind系と`eslint-plugin-import`についてはお好み

ルートに`.eslintrc.json`と`.prettierrc`を作成し、内容を以下のように編集

```json:.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
    "plugin:vue/essential",
    "plugin:tailwindcss/recommended", // お好み
    "@nuxtjs/eslint-config-typescript",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "plugins": ["vue", "@typescript-eslint", "tailwindcss"],
  "rules": {
    /* 以下はお好み */
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          "../*",
          "./assets/*",
          "./components/*",
          "./pages/*",
          "./*.vue"
        ]
      }
    ],
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "parent",
          "sibling",
          "index",
          "object",
          "type"
        ],
        "pathGroups": [
          {
            "pattern": "{vue,vue-router,vite,@vitejs/plugin-vue}",
            "group": "builtin",
            "position": "before"
          },
          {
            "pattern": "@src/**",
            "group": "parent",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["builtin"],
        "alphabetize": {
          "order": "asc"
        },
        "newlines-between": "always"
      }
    ],
    "@typescript-eslint/consistent-type-imports": [
      "error",
      { "prefer": "type-imports" }
    ]
  }
}
```

```:.prettierrc
{
  "singleQuote": true,
  "semi": true,
  "vueIndentScriptAndStyle": true,
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/eslint-config-prettier"
  ]
}
```

### GitHub Pages

今回はGitHub Pagesにデプロイできるようにしたいので、そのための設定を行う
まず、`nuxt.config.ts`を以下の内容を追記

```ts:nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  srcDir: 'src',
  /* ここから */
  ssr: false,
  app: {
    baseURL: '/nuxt-template/', // ここはリポジトリ名にする(前後のスラッシュは必須)
  },
  /* ここまで */
  css: ['@/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});
```

次に、`src`に`public`ディレクトリを作成し、その中に`.nojekyll`ファイルを作成。中身は空でOK

また、ルートに`docs`ディレクトリを作成し、以下のコマンドを実行

```bash
yarn run generate
```

すると、`dist`ディレクトリが生成されるので、`dist`の中身をすべて`docs`に移動させる。`dist`は削除してOK[^1]

あとはGitHubにpushすれば完了です。

## おわりに

実は以前もNuxt3での開発を試したことがあったのですが、`.nojekyll`の部分で詰まりました。`public`ディレクトリに置けばよかったのですね……

今回作成したリポジトリを貼っておきます

https://github.com/airRnot1106/nuxt-template

[^1]: 昔はgenerateで生成するディレクトリ名を変更できたみたいですが、Nuxt3ではそのような設定は見当たりませんでした。割とめんどくさい作業なので変更する方法を知りたいです