はじめに

Nuxt3を学習するにあたって導入に色々とつまずいたので、備忘録として導入手順を記しておきます。

環境

VSCode: v1.67.2

node: v18.0.0
yarn: v1.22.18

nuxt: v3.0.0-rc.3
typescript: v4.6.4
tailwindcss: v3.0.24
eslint: v8.15.0

導入

Nuxt3

インストール

今回作成するアプリ名は「nuxt-app」とします。

$ npx nuxi init nuxt-app

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

上記の確認が表示された場合は、yを入力。

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'nuxi@3.0.0-rc.3',
npm WARN EBADENGINE   required: { node: '^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.10.0', npm: '7.24.0' }
npm WARN EBADENGINE }

ここでこのようなエラーが発生した場合はnodeのバージョンによるものなので、requiredにあるバージョンのnodeを使用するようにしてください。

作成が完了したら、

$ yarn install

を実行して必要moduleをインストール。

$ yarn run dev

そして動作確認。

現時点でのディレクトリ構造は以下のようになる。

.
├── .gitignore
├── .nuxt //yarn run devを実行すると作成される
├── README.md
├── app.vue
├── node_modules
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── yarn.lock

結構簡素ですね。componentsフォルダやpagesフォルダなどは適宜自分で作成するっぽい。

nuxt.config.tsの設定

とりあえず、よくわからないけどnitroを設定。

import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
});

次に、srcDirを設定。これでcomponentsやpagesなどのディレクトリを./src以下に収めることができる。ワークスペースにsrcディレクトリがないと許さない呪いにかかっている場合は必須の設定。

TypeScript

インストール

Nuxt3ではTypeScriptが標準で対応されているため、インストールは特に不要(後にeslintで必要になるが)。設定だけしていく。

tsconfig.jsonの設定

初期時点でのtsconfigの中身は

./tsconfig.json

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

このようにめっちゃ簡素。extendsからわかる通り、実体は.nuxtにある。

.nuxt/tsconfig.json

// Generated by nuxi
{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "skipLibCheck": true,
    "strict": false,
    "allowJs": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "types": [
      "node"
    ],
    "baseUrl": "..",
    "paths": {
      "~~": [
        "."
      ],
      "~~/*": [
        "./*"
      ],
      "@@": [
        "."
      ],
      "@@/*": [
        "./*"
      ],
      "~": [
        "."
      ],
      "~/*": [
        "./*"
      ],
      "@": [
        "."
      ],
      "@/*": [
        "./*"
      ],
      "assets": [
        "assets"
      ],
      "public": [
        "public"
      ],
      "#app": [
        "node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "#head": [
        "node_modules/nuxt/dist/head/runtime"
      ],
      "#head/*": [
        "node_modules/nuxt/dist/head/runtime/*"
      ],
      "#components": [
        ".nuxt/components"
      ],
      "#imports": [
        ".nuxt/imports"
      ],
      "#build": [
        ".nuxt"
      ]
    }
  },
  "include": [
    "./nuxt.d.ts",
    "../**/*"
  ]
}

.nuxt/tsconfig.jsonから加えたり変更したい設定を./tsconfig.jsonに記述する。これはそれぞれお好みの設定でOK。今回は型チェックの強化を行う。

./tsconfig.json

{
  // https://v3.nuxtjs.org/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@latest

@nuxtjs/tailwindcss、postcss、autoprefixerは無くても動作した。

$ npx tailwindcss init

その後srcにassetsフォルダを作成し、assetsにcssフォルダを作成し、さらにcssにtailwind.cssを作成する。

./src
└── css
    └── tailwind.css

tailwind.css

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

tailwind.config.jsの設定

./tailwind.config.js

module.exports = {
  content: [
    './app.vue',
    './src/components/**/*.{vue,js}',
    './src/layouts/**/*.vue',
    './src/pages/**/*.vue',
    './src/plugins/**/*.{js,ts}',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

contentにnuxt.config.tsを指定するとエラーが出るので注意。darkModeもなんかwarnが出るけどとりあえず無視。

nuxt.config.tsの修正

nuxt.config.tsにTailwindCSSの設定を加える。

import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  srcDir: 'src/',
  nitro: {
    preset: 'node',
  },
  css: ['@/assets/css/tailwind.css'],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
        },
      },
    },
  },
});

@にはsrcDirに指定したディレクトリが勝手に入る模様。なので@/src/assets/tailwind.cssとする必要はない。

ESLint

インストール

$ yarn add -D eslint eslint-plugin-vue typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript

$ yarn run eslint --init

Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y

? How would you like to use ESLint?
❯ To check syntax and find problems

? What type of modules does your project use?
❯ JavaScript modules (import/export)

? Which framework does your project use?
❯ Vue.js

? Does your project use TypeScript? › Yes

? Where does your code run?

? Where does your code run?
✔ Browser
✔ Node

? What format do you want your config file to be in?
❯ JavaScript

? Would you like to install them now with npm? › No

$ yarn install

// もしprettierを使用しているなら以下もインストール
$ yarn add -D eslint-config-prettier

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:@typescript-eslint/recommended',
    '@nuxtjs/eslint-config-typescript', // 手動で追加
    'prettier', // prettierを使用しているなら追加
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
  },
};

API Routes

地味にここに時間がかかった。
正式名称がよくわからないけどとりあえずAPI Routesと呼ばれていたのでそれに倣うこととする。

他のところにはapiは~/server/api/に置けと書いてあったけど、実際には@/server/api/だった。後、indexという名前は認識してくれないっぽい。