SSR / Nuxt 注意事项
@luxeanor/ui 全部组件遵循 SSR 安全纪律，可直接用于 Nuxt 3 / VitePress 等服务端渲染环境（本文档站本身就是 SSG 构建的）。
库内部的纪律（你可以依赖的保证）
- 浏览器 API 只出现在
onMounted/ 事件回调 /watch里——模块顶层与setup同步段不触碰window/document/localStorage - 浮层组件（Modal / Drawer / Dropdown / Select / Tooltip / Toast / Confirm） 使用
Teleport挂到body，并以 mounted 守卫（v-if="mounted"）确保服务端不渲染浮层内容，避免注水不匹配 useTheme在 SSR 下返回默认值、不读写 DOM 与存储
消费端要注意的
1. 主题属性的服务端一致性
服务端输出的 HTML 没有 data-theme/data-mode 时，首帧会闪默认主题。两种处理：
- 固定主题：直接在服务端模板/
htmlAttrs写死属性（如useHead({ htmlAttrs: { 'data-theme': 'ink', 'data-mode': 'light' } })） - 跟随用户偏好：内联 themeBootScript 到
<head>，CSS 解析前落属性
2. 引入方式
| 场景 | 方式 | 额外配置 |
|---|---|---|
普通项目 npm i @luxeanor/ui | 吃 dist 产物（ESM + d.ts） | 无 |
monorepo workspace:* 引用源码 | 直接吃 .vue/.ts 源码 | Nuxt 需 build.transpile: ['@luxeanor/ui'] |
3. 客户端专属逻辑
你的业务代码若配合 useMouseVars、useReveal 等做视觉增强，注意它们依赖 IntersectionObserver/指针事件——库内已做环境守卫，SSR 下是空操作，无需你包 <ClientOnly>。真正需要 <ClientOnly> 的只有首帧状态依赖 localStorage 的组件（如 LxThemeSwitcher 挂在会被服务端渲染的位置时）。