Server Block Nuxt

🚀 歡迎來到 Server Block Nuxt！

🧪 此模組為實驗性功能 🧪

Nuxt 模組，為您的頁面組件增加 server block 支援。

<server lang="ts"></server>
<script lang="ts" setup></script>
<template></template>
<style></style>

您可以將 server block 視為在頁面組件中編寫 API 處理程序的便捷方式。

📦 安裝

安裝此模組和 volar 擴充功能

npm i -D @hebilicious/server-block-nuxt @hebilicious/sfc-server-volar

將此模組新增至您的 Nuxt 設定檔

export default defineNuxtConfig({
  modules: [
    "@hebilicious/server-block-nuxt"
  ]
})

完成！volar 擴充功能將由 nuxt 模組自動安裝。

📖 用法

Server block 僅在頁面組件中可用。
預設匯出在 server block 中不可用。請使用具名匯出。

在頁面組件中新增 server block

<server lang="ts">
const message = "Hello World!!!"
const bye = "bye!"
export const GET = defineEventHandler(() =>({ message }))
export const POST = defineEventHandler(() =>({ message: bye }))
</server>

<script setup lang="ts">
const { data } = useFetch("/api/message")
</script>

<template>
  <div> Hello Message, {{ data }} </div>
</template>

這將在 server/.generated/api 中生成 2 個處理程序

GET : server/.generated/api/message.get.ts
POST : server/.generated/api/message.post.ts

支援所有 HTTP 方法。

自訂路由

您可以使用 path 屬性覆寫預設路由慣例

<server lang="ts" path="/not-api/this/is/cool">
export const GET = defineEventHandler((event) => {
  return "We're here now."
})
</server>

<script setup lang="ts">
const { data } = useFetch("/not-api/this/is/cool")
</script>

<template>
  <h1>Hello</h1>
  <div> {{ data }} </div>
</template>

將生成一個 server/.generated/not-api/this/is/cool.get.ts get 處理程序。

💡 常見問題

為什麼是 <server> 而不是 <script server>？

<script server> 會導致 SFC 中額外 script 標籤的目前行為出現問題（特別是 import/exports）。
<server> block 會完全從 SFC 中移除，並且不會干擾 <template> 或 <script>，它們創建了一個清晰的界線。
語法突顯在使用 lang 屬性的環境中運作。我也希望 GitHub 支援。

為什麼沒有 defineServerProps 或 loaders？

如果您想使用表單操作和 loaders，您可以將此與另一個函式庫（例如 https://github.com/Hebilicious/form-actions-nuxt）結合使用。

我應該將生成的檔案提交到我的儲存庫嗎？ 不用。將為您生成一個 .gitignore 檔案。

📝 待辦事項

與 form-actions 和 loaders 整合
新增 useFetch 類型定義
支援在單一檔案中有多個 server block

🫴 貢獻

歡迎提供意見反應、問題和 PR。