如何在server/api中渲染组件？

Question

致力于 Nuxt 3 项目，在第三方网站上嵌入表单，
逻辑是这样的：

- 可以说 example.app 是一个 Nuxt 3 项目，连接到带有表“Projects”
的 supabase 数据库 - 在 anotherwebsite.com 上，我们想要放置一个来源为“example.com/api/project/PROJECT_UUID”
的 iframe 现在我们需要让该 api 端点输出一个简单的联系表单的 HTML。

表单实际上是一个简单的组件FormComponent.vue，提交时会在supabase中为表“Submissions”创建一个新条目
有没有办法在访问 api url 时渲染 FormComponent.vue：“example.com/api/project/PROJECT_UUID”？

示例：

文件：

api/project.ts

export default defineEventHandler(() => {
  let html = '<div>
    <button>Hello World</button>
  </div>'
  return html;
});

现在如果我们访问 example.app/api/231-2312-123-123 将返回渲染的 html，如下所示：

所以我需要做这样的事情：

import FormComponent from "component/location/form.vue";
import compile_function from 'somewhere'?
export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  
  let html = compile_function( FormComponent, {project_id:id} );

  return html;
});

下一个项目示例

基本上， 尝试做一些类似于 Feedbase 的事情：

• https://www.feedbase.co/widget/e03305e8-c822-4222-9c5e-f53a47d0a5ee
• https://codepen.io/perlatsp/pen/eYxeYmX Feedbase 似乎是用 NextJS 构建的

Vue-电子邮件

我发现 nuxtjs vue-email 这个模块的工作原理相同， https://github.com/Dave136/vue-email：

https://github.com/Dave136/vue-email/blob/main/packages/compiler/src/template.ts

但是对这段代码感觉有点迷失。

Answer 1

你找到解决办法了吗？想做类似的事情