服务器块 Nuxt

🚀 欢迎来到服务器块 Nuxt！

🧪 此模块处于实验阶段 🧪

Nuxt 模块，在你的页面组件中添加服务器块支持。

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

你可以将服务器块视为一种在页面组件中编写 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 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 中其他脚本标签的当前行为出现问题（尤其是在导入/导出方面）
<server> 块完全从 SFC 中移除，不会干扰 <template> 或 <script>，它们创建了一个清晰的边界。
语法高亮在使用 lang 属性的环境中有效。我也希望 GitHub 支持。

为什么没有 defineServerProps 或加载器？

如果你想使用表单操作和加载器，可以将其与其他库（例如 https://github.com/Hebilicious/form-actions-nuxt）结合使用。

我是否应该将生成的的文件提交到我的仓库？ 不。将为你生成一个 .gitignore 文件。

📝 待办事项

与表单操作和加载器集成
添加 useFetch 类型
支持在一个文件中使用多个服务器块

🫴 贡献

欢迎反馈、问题和 PR。