はじめに

プロジェクトでNuxt3を採用することになったため、とりあえず開発できるように使いそうな機能等をメモ
理解編は別で投稿するかも

前提

SSR
静的ファイルはAWS S3 + CloudFront, バックエンドはAWS Lambda, DBはRDS(postgresql)
デプロイはCodeCommit + CodeBuild + AWS CLIでやるので、Serverless Frameworkは使用しない(今後検討するかも)

インストール

npx nuxi@latest init <project-name>
cd <project-name>
npm i
npm run dev # 初期状態で開発サーバー起動
npm run build # ビルド

設定変更

AWS Lambda用に変更

nuxt.config.ts

export default defineNuxtConfig({
- devtools: { enabled: true }
+ nitro: {
+   preset: 'aws-lambda'
+ }
})

ディレクトリ構成

/
 ├─ .output/      -- build時に出力されるファイル
 ├─ assets/       -- 共通のCSSなどを置く
 ├─ components/   -- 画面のパーツなどを配置するファイル
 ├─ layouts/      -- レイアウトを指定する
 ├─ pages/        -- ページを配置する これがあるとルーティングが有効になる
 ├─ public/       -- 静的ファイルを配置
 ├─ server/       -- バックエンドコードを配置
 ├─ app.vue
 ├─ buildspec.yml -- CodeBuildでデプロイする際の設定ファイル
 └─ nuxt.config.ts

フロント側

app.vue

layout、pagesディレクトリを使う場合は以下に変更する

<template>
  <div>
-   <NuxtWelcome />
+   <NuxtLayout>
+     <NuxtPage />
+   </NuxtLayout>
  </div>
</template>

カスタムコンポーネントの双方向バインディング

昔のVue3を少し触ってたことがあり、その頃から変わっていたので戸惑った
昔はv-model == :value + @input(※書き方による)だったが、
今はv-model == :model-value + @update:model-value

Auto-imports

Nuxtでは、よく使いそうなNuxt APIやVue APIは自動でインポートされるので、import文を書かなくて良い

Composition API

NuxtというよりVue側の仕様
<script setup>と書くといい感じにしてくれる
変数や関数がバインドされ、<template>内で使用できる
ボイラープレートがめちゃくちゃ減ってHappy

リアクティブ

ref()で変数に格納する
ref()はVueの機能で、これもNuxtでauto importされている

<template>
<div>
  <button @click="count++">+</button>
  {{ count }}
  <button @click="count--">-</button>
</div>
<template>

<script setup>
const count = ref(0)
</script>

reactive()もある(違いは未調査)

ルーティング

Nuxtはファイルベースルーティング
pages以下に配置したファイルがそのままパスになる

ルーティング例

以下のようなディレクトリ構成にすると、

pages
 ├─ index.vue
 ├─ help.vue
 └─ details/
     ├─ detail1.vue
     └─ detail2.vue

以下のようなルーティングになる

/
/help
/details/detail1
/details/detail2

UIでルーティングする方法は主に2つ
1.NuxtLinkを使う(nuxtっぽい方法)

<template>
<NuxtLink to="/hoge">to hoge</NuxtLink>
</template>

2.navigateToを使う(vueっぽい方法)

<template>
<button @click="navigate">プログラムでページ遷移</button>
<button @click="() => navigateTo({path: '/fuga'})">遷移処理だけなら直接書いても良い</button>
</template>

<script setup lang="ts">
const navigate = () => navigateTo({path: '/hoge'});
</script>

NuxtLinkはデフォルトではリンクっぽい見た目になる
ボタンっぽい見た目の遷移UIを作りたいならnavigateToの方が楽かも？
(NuxtLinkをCSSでカスタマイズしてもいいかもしれないが)

ページ遷移時の値の受け渡し

paramsを使いたかったがうまくいかなかった
一旦queryを使う

navigateTo({path: '', query: {id: 1}})

後で調べるメモ：キャッチオールルート、pages/404.vue

バックエンド側

API

/server/apiディレクトリにhoge.tsファイルを置くと、/api/hogeにルーティングが割り当てられる
そうしたくない場合は、/server/routesディレクトリにhoge.tsファイルを置くことで/hogeにルーティングが割り当てられる
tsファイルはdefineEventHandler()かeventHandler()をexport defaultする必要がある
POSTのbodyを受け取る場合は以下

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  console.log(body);
});

API側はダイナミックルーティングには対応していないが、ファイル名に[]をつけることで変数として受け取ることは可能？
つまり、/server/routes/hoge[id]/fuga.vueはできないが、/server/routes/hoge/[id].vueは可能？(要確認)

APIの呼び出し(クライアント側)

<script setup>直下ではuseFetchを使う
ボタンクリック時のメソッド内など、レンダリング後に実行されるAPIは$fetchを使う
(理由はまだ調べてない。メソッド内でuseFetchを使ったら開発者ツールのコンソールにwarningが出ていた)

AWSにデプロイ後にPOSTメソッドで403になる

CloudFrontのビヘイビアでPOSTも許可する

APIのレスが遅い

デフォルトのLambdaだとメモリが128MBで足りてない
512MBぐらいにすると許容範囲ぐらいになる
上げすぎても意味ない？

DB接続

検証中

その他

biome Prettier / ESLint

biome使いたかったけど、まだvue対応してなかった...orz
Prettier / ESLint使います
linter兼formatter
※npm i時はbiomeじゃなくて@biomejs/biomeを指定すること
　(biomeは別のパッケージ)

npm i --save-dev @biomejs/biome
npx biome init # 設定ファイル生成

~~設定等はこちらを参照~~

~~https://zenn.dev/collabostyle/articles/86477d39be3a2e~~

同じPCで別プロジェクトもやっておりそちらはESLint/Prettierを使用している
使い分けは、VS Codeでワークスペース単位の設定をし、本プロジェクトではbiomeを使用するように設定
やり方はこちらを参照

~~https://blog.logical.co.jp/entry/2022/07/25/130000~~

テスト

nodeは最新バージョンに上げること
古いの(v16.x)を使ってたせいで導入がうまくいかなくて時間を食ってしまった

前は公式が準備中みたいだったが、今はちゃんと書かれているのでこれに従う

その他、未検証事項

今後更新するか、別の記事にしたい

状態管理(未検討)

爆速導入時点では考えなくてもいいかな...？

バリデーション

v-text-field の props に rules を渡すことでバリデーションを実装できる？
zod入れる？
→zod入れる予定

認証

NuxtAuthを使う予定

爆速Nuxt3導入