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

はじめに

前回の記事では、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とする
以下のコマンドを作成したいディレクトリで実行

npx nuxi init nuxt-template

cd nuxt-template/

yarn install

次に、nuxt.config.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に以下の内容を追記(お好み)

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

以下のコマンドを実行

yarn add -D tailwindcss autoprefixer postcss

次に、プロジェクトのルート(nuxt.config.tsと同じ階層)にtailwind.config.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を作成する
内容を以下のように編集

src/assets/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

次に、nuxt.config.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

以下のコマンドを実行

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を作成し、内容を以下のように編集

.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を以下の内容を追記

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ディレクトリを作成し、以下のコマンドを実行

yarn run generate

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

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

おわりに

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

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

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