👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

建立第一個 Server API

在 server/api 目錄下建立一個檔案 ./server/api/hello.js：

export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})

發送 [GET] 方法的請求，測試網站下的 /api/hello 網址路徑。

建立不同請求方法 (HTTP Methods)

在 server/api 目錄下建立一個檔案 ./server/api/test.get.js：

export default defineEventHandler(() => {
  return 'HTTP 請求方法為 [GET]'
})

在 server/api 目錄下建立一個檔案 ./server/api/test.post.js：

export default defineEventHandler(() => {
  return 'HTTP 請求方法為 [POST]'
})

分別發送 [GET] 與 [POST] 方法的請求，測試網站下的 /api/test 網址路徑。

建立動態匹配路徑參數的 API

在 server/api/hello 目錄下建立一個檔案 ./server/api/hello/[name].js：

export default defineEventHandler((event) => {
  const name = getRouterParam(event, 'name')
  return `Hello, ${name}!`
})

發送 [GET] 方法的請求，分別測試網站下的 /api/hello/ryan 與 /api/hello/jennifer 網址路徑。

取得 API 請求中的 Body 與 Query

在 server/api 目錄下建立一個檔案 ./server/api/search.js：

export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const body = await readBody(event)

  return {
    keyword: body.keyword,
    query
  }
})

取得請求中 Body

建構 API 請求的 Body，以 JSON 夾帶一個 keyword

{
  "keyword": "iThome"
}

發送 [POST] 方法的請求至 /api/search API。

取得請求中 Query

同樣建構 API 請求的 Body，以 JSON 夾帶一個 keyword

{
  "keyword": "iThome"
}

接著在請求網址中夾帶 Query 參數，page 為 1，pageSize 為 10。

發送 [POST] 方法的請求至 /api/search?page=1&pageSize=10 API。

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 建立 Server API

參考資料

• Nuxt Server Directory