如何在Nuxt 3的Server API中渲染Vue组件？

实现步骤 #

1. 安装必要依赖
   要在服务端渲染Vue组件，需安装@vue/server-renderer（版本需与Nuxt内置Vue版本匹配，直接安装即可）：

   npm install @vue/server-renderer
   # 或
   yarn add @vue/server-renderer
   

2. 编写API路由文件
   在server/api/project/[id].ts中实现组件渲染逻辑：

   import { createSSRApp, h } from 'vue'
   import { renderToString } from '@vue/server-renderer'
   import FormComponent from '~/components/FormComponent.vue' // 替换为你的组件实际路径
   
   export default defineEventHandler(async (event) => {
     // 获取URL中的project_id参数
     const projectId = getRouterParam(event, 'id')
     if (!projectId) {
       throw createError({ statusCode: 400, message: 'Project ID is required' })
     }
   
     // 创建SSR应用实例，渲染目标组件
     const app = createSSRApp({
       render: () => h(FormComponent, { projectId })
     })
   
     // 将组件渲染为HTML字符串
     const html = await renderToString(app)
   
     // 返回完整HTML文档，包含客户端脚本确保交互正常
     return `
     <!DOCTYPE html>
     <html>
       <head>
         <meta charset="UTF-8">
         <title>Project Contact Form</title>
         <!-- 引入Nuxt客户端脚本，保证组件可交互 -->
         <script type="module" src="/_nuxt/entry.mjs"></script>
         <!-- 内联组件样式或引入全局样式 -->
         <style>
           .form-container { max-width: 500px; margin: 2rem auto; padding: 0 1rem; }
           .form-group { margin-bottom: 1rem; }
           label { display: block; margin-bottom: 0.5rem; }
           input, textarea { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
           button { background: #0070f3; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; }
         </style>
       </head>
       <body>
         <div id="app">${html}</div>
       </body>
     </html>
     `
   })
   

3. 调整FormComponent.vue交互逻辑
   表单提交通过内部API处理，避免客户端暴露Supabase敏感信息：

   <template>
     <div class="form-container">
       <h2>Submit Your Inquiry</h2>
       <form @submit.prevent="handleSubmit">
         <div class="form-group">
           <label for="name">Name</label>
           <input id="name" v-model="form.name" required />
         </div>
         <div class="form-group">
           <label for="email">Email</label>
           <input id="email" type="email" v-model="form.email" required />
         </div>
         <div class="form-group">
           <label for="message">Message</label>
           <textarea id="message" v-model="form.message" required></textarea>
         </div>
         <button type="submit">Submit</button>
       </form>
     </div>
   </template>
   
   <script setup>
   const props = defineProps({
     projectId: {
       type: String,
       required: true
     }
   })
   
   const form = reactive({
     name: '',
     email: '',
     message: ''
   })
   
   const handleSubmit = async () => {
     try {
       // 调用内部API处理提交，由服务端操作Supabase
       const response = await fetch('/api/submissions', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({
           ...form,
           project_id: props.projectId
         })
       })
   
       if (response.ok) {
         alert('Submission successful!')
         Object.assign(form, { name: '', email: '', message: '' })
       } else {
         throw new Error('Submission failed')
       }
     } catch (error) {
       alert('An error occurred: ' + error.message)
     }
   }
   </script>
   

4. 创建表单提交处理API
   在server/api/submissions.ts中编写Supabase操作逻辑：

   import { serverSupabaseClient } from '#supabase/server'
   
   export default defineEventHandler(async (event) => {
     const client = await serverSupabaseClient(event)
     const body = await readBody(event)
   
     // 验证必填字段
     if (!body.name || !body.email || !body.message || !body.project_id) {
       throw createError({ statusCode: 400, message: 'Missing required fields' })
     }
   
     // 插入数据到Supabase的Submissions表
     const { error } = await client
       .from('Submissions')
       .insert([{
         name: body.name,
         email: body.email,
         message: body.message,
         project_id: body.project_id
       }])
   
     if (error) {
       throw createError({ statusCode: 500, message: error.message })
     }
   
     return { success: true }
   })
   

关键说明 #

• 借助@vue/server-renderer的renderToString方法，在服务端将Vue组件转为HTML字符串。
• 返回的HTML需包含Nuxt客户端脚本，确保表单交互逻辑在客户端正常运行。
• 表单提交通过内部API完成，由服务端操作Supabase，避免客户端暴露敏感密钥，保障安全性。
• 可根据需求调整HTML模板中的样式，或处理组件的Scoped样式（通过内联或全局样式实现）。

内容的提问来源于stack exchange，提问作者Perlat Kociaj