高速でNuxt3環境を用意する方法

弊社では、ちっちゃいアプリやモックにはNuxtを使うことが多いです。
Nuxt、なんでもできるしね。

立ち上げ方で毎回右往左往してしまうので、まとめておきます。

yarn 前提で書いています。

インストール

# node インストール
$ asdf global nodejs 22.12.0 
$ node -v
v22.12.0
$ yarn -v
1.22.22

# nuxt インストール
$ npx nuxi@latest init "nuxt3-test"
✔ Which package manager would you like to use?
yarn
✔ Initialize git repository?
Yes

オプションめっちゃ減ってる！

ライブラリ

UI: PrimeVue

UI は PrimeVue を採用。一番お手軽に綺麗になる。
ただ nuxt-module で入れても、めんどくささが変わらないので手動インストール。

ついでに日本語化も行う。

$ yarn add primevue @primevue/themes
$ yarn add --dev @primevue/nuxt-module

nuxt.config.ts に設定を追記する。

nuxt.config.ts

+ import Aura from '@primevue/themes/aura'
+ import { ja } from 'primelocale/ja.json'
  
  export default defineNuxtConfig({
    modules: [
+     '@primevue/nuxt-module'
    ],
+   primevue: {
+     options: {
+       theme: {
+         preset: Aura,
+       },
+       locale: ja,
+     }
+   }
  })

type エラーなどは、起動すれば消える。
theme は 4種類くらい用意されてるので、好きなものを使おう。

次に icon セットを入れる。
合わせて SCSS を使えるようにする。

$ yarn add -D sass
$ yarn add primeicons

assets/css/main.scss を新たに作成する。

assets/css/main.scss

@import "primeicons/primeicons.css";

nuxt.config.ts に設定を追記する。

nuxt.config.ts

+ import Aura from '@primevue/themes/aura'
  
  export default defineNuxtConfig({
+   css: ['~/assets/css/main.scss'],
  })

primeicon は小さいセットなのに、使えるものが入っているので、簡易使用には便利。

CSS: Tailwind

Tailwind 最強！

$ npx nuxi@latest module add tailwindcss

設定は良しなにやってくれる。

基本的な tailwind ファイルは自動生成してくれるらしい。
ちょっとした変更は nuxt.config.ts に tailwindcss オプションを増やして書く。
大きな変更は、いつも通り設定ファイルを作る。

日付: tempo

普段は dayjs を使用しているのだが、激軽とのことで新生の tempo を採用。

$ npx nuxi@latest module add nuxt-formkit-tempo

設定は良しなにやってくれる。

ストレージ: Pinia

お馴染み pinia。
モックの時にはめっちゃ便利。

persistedstate を導入することで、値をブラウザに保存できる。

$ npx nuxi@latest module add pinia

$ yarn add pinia-plugin-persistedstate

nuxt.config.ts に設定を追記する。

nuxt.config.ts

  export default defineNuxtConfig({
    modules: [
+     'pinia-plugin-persistedstate/nuxt',
    ],
  })

ESlint

biome なんて知らない...
flat config なんて知らない...

$ npx nuxi module add eslint
$ yarn add --dev typescript vite-plugin-eslint2

nuxt.config.ts に設定を追記する。

nuxt.config.ts

  export default defineNuxtConfig({
    modules: [
+     '@nuxt/eslint',
    ],
+   eslint: {
+     checker: {
+       fix: true,
+     },
+   },
  })

checker を付けることで自動 lint が動くようになる！
checker.configType: 'eslintrc' にて、flat config を無効にできる！
checker.fix: true にて、自動 lint が動くようになる！

各社に存在する秘伝のたれを使おう......

おわりに

こんな記事、前にも書いた気がする...