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> 块从 SFC 中完全移除，并且不会干扰 <template> 或 <script>，它们创建了一个清晰的边界。
语法高亮在使用 lang 属性的环境中有效。我也希望 github 支持。

为什么没有 defineServerProps 或加载器？

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

我应该将生成的文件提交到我的存储库吗？ 不应该。将为您生成一个 .gitignore 文件。

📝 待办事项

与 form-actions & loaders 集成
添加 useFetch 类型定义
支持在单个文件中使用多个 server block

🫴 贡献

欢迎提供反馈、问题和 PR。