Nuxt3中安全渲染HTML字符串须用v-html配合<ClientOnly>组件，确保内容可信；静态HTML片段应拆为Vue组件并用useHead注入样式；表单需用useFetch替代action提交并手动处理状态。
HTML 字符串怎么在 Nuxt3 里安全渲染
直接用 v-html 渲染原始 HTML 字符串是常见做法，但 Nuxt3 的服务端渲染（SSR）会让它出问题：服务端不执行 JS、不解析自定义标签、还可能因 DOM API 缺失抛错 document is not defined。
真正能用的只有 v-html + client-only 组合，且必须确保 HTML 内容是可信的（比如 CMS 后台人工录入，而非用户输入）。
- 把含 HTML 的变量放在
data()或ref()中，别写死在模板里 - 用
<ClientOnly><div v-html="htmlContent"></div></ClientOnly>包裹，避免 SSR 阶段执行 - 如果 HTML 含内联脚本或
<style>，Nuxt3 不会执行它们——这不是 bug，是设计使然
Nuxt3 里怎么处理带 class/id 的静态 HTML 片段
纯结构+样式的 HTML 片段（比如从设计稿切出来的 banner 区域），不该当字符串塞进 v-html。它本质是组件逻辑，该拆成独立的 Vue 组件。
正确路径是：新建 components/HtmlBanner.vue，把 HTML 搬进去，用 defineProps 接收动态内容，用 useHead 注入对应 CSS（如果需要）。
立即学习“前端免费学习笔记（深入）”；
- class 名别硬编码，改用
:class动态绑定，方便主题切换或状态控制 - id 属性慎用——同个组件多次渲染会导致重复 id，应改用
data-id或由useId()生成唯一值 - 如果片段含第三方样式（如 Bootstrap 类名），确认项目已全局引入，否则要手动
@import或useHead注入
从 HTML 文件转 Nuxt3 页面组件要注意什么
把一个 index.html 直接改造成 pages/index.vue 不只是改后缀，关键在生命周期和资源加载时机。
Nuxt3 页面组件默认启用 SSR，而原 HTML 可能依赖 window.onload 或 jQuery ready，这些在服务端根本不存在。
- 移除所有
window、document、localStorage的顶层调用，放到onMounted钩子中 - script 标签里的内联 JS 必须抽成
setup()中的函数，或封装为 composable（如useSlider()） - link 标签引入的字体或图标 CSS，改用
useHead({ link: [...] })声明，确保 SSR 和 CSR 一致 - 图片路径写成
/img/logo.png（public 目录下）或~/assets/img/logo.png（assets 目录下），别用相对路径如./img/logo.png
HTML 表单提交怎么对接 Nuxt3 的 server API
传统 HTML 表单的 action + method 在 Nuxt3 页面里基本失效——它会触发整页跳转，破坏 SPA 体验，也绕过 Nuxt 的数据获取机制。
必须用 useFetch 或 $fetch 手动发请求，并自行处理 loading、error、success 状态。
- 表单 submit 事件必须
preventDefault()，否则浏览器按原生逻辑提交 - 后端接口地址别写死，用
useRuntimeConfig().public.apiUrl统一管理 - 如果后端返回的是重定向响应（302），Nuxt3 不会自动跳转，得手动
navigateTo() - 表单验证别只靠
required或pattern，前端校验只是体验优化，后端才是最终防线
最麻烦的不是语法转换，而是 HTML 里那些隐式依赖：DOM 就绪时机、全局变量、jQuery 插件、CSS 作用域泄漏……这些不会报错，但会在某个路由、某种设备上突然失效。
