【Nuxt3】serverでAPIを作成するときに、ひとつのファイルに複数ルーティングを設定する方法

nuxt3のserverについては、公式に色々使い方が掲載されていますが、ここでは私がapiを設定する時の使い方を紹介します。

apiを色々設定する時に、apiの数だけserver/api下にファイルを作ってませんか。
ファイルを一つにしてルーティングを分岐させましょう。

server/api/v1/[...menu].ts

• ファイル名は[...hoge].tsのように設定します。
• そしてファイルの中は以下のようにルーティングを設定します

import { createRouter, defineEventHandler, useBase, readBody } from 'h3'
import { v4 as uuidv4 } from 'uuid';

const menus = {
      '1':{
        name:'ギョーザ',        
      },
      '2':{
        name:'肉と卵の炒り付け',
      },
      '3':{
        name:'カニ玉',
      },
      '4':{
        name:'麻婆豆腐',
      },

const router = createRouter()

router.get('/allMenus',defineEventHandler(()=>{
  return Object.entries(menus).map(([key,data])=>({...data,id:key}))
}))

router.get('/menuItem',defineEventHandler((event)=>{
  const {id}:{id:string} = getQuery(event)
  return menus[id]
}))

router.put('/menuItem',defineEventHandler(async event=>{
  const body = await readBody(event)

  body.forEach((menu,i) => {
    const {id}:{id:string} = menu
    if(id.startsWith('new')){
      delete part.id
      menus[uuidv4()] = menu
    }else{
      menus[id] = menu
    }
  });
}))

export default useBase('/api/v1/bom', router.handler)

フロントサイドからはuseFetchあるいは$fetchを使って、それぞれのルート（/menu/allMenus、/menu/menuItem、/menu/menuItemのPUTメソッド）を呼び出せます。

※ 全てのルーティングに"menu"が入っているので、「menuに関するapiなんだな」とわかりやすいです。

pages/index.vue

<script setup>
const {data} = await useFetch('/api/v1/menus/allMenus')

const menus:Menu[] = data.value.map(d=>new Menu(d)) //Menuクラスは別途設定
</script>