element-plus-ssr

用途：为 Element Plus 在服务端渲染（SSR）环境中提供配置指导，适用于 Nuxt.js 与自定义 SSR 项目，主要解决水合错误、ID 与 z-index 不匹配、Teleport 组件处理等问题。

主要能力：

1. Nuxt.js 集成：推荐使用官方模块，安装命令为 npm install -D @element-plus/nuxt，并在 nuxt.config.ts 中加入 modules: ['@element-plus/nuxt']，模块会自动处理 SSR 相关配置。
2. 自定义 SSR 配置：需注入 ID_INJECTION_KEY（如 prefix: 1024, current: 0）与 ZINDEX_INJECTION_KEY（如 current: 0），避免服务端与客户端生成不同 ID 或 z-index 导致水合错误。
3. Teleport 处理：ElDialog、ElDrawer、ElTooltip、ElDropdown、ElSelect、ElDatePicker、ElPopover、ElPopconfirm 等组件内部使用 Teleport。可选方案：用 ClientOnly 仅在客户端渲染，或注入 Teleport 标记（如 <!--app-teleports-->）并在服务端渲染时收集 ctx.teleports 输出到正确位置。
4. 常见问题：水合不匹配、样式缺失（需引入 element-plus/dist/index.css）、图标不渲染（需全局注册 @element-plus/icons-vue）。

使用方式：提供框架类型（Nuxt.js 或自定义 SSR）、问题类型、受影响组件与当前配置，技能会给出对应配置代码与解决方案。

适用场景：Vue 3 SSR 项目、Nuxt.js 项目、需要修复 Element Plus 水合错误的场景。

限制：需要 Vue 3.x 且支持 SSR；部分组件需特殊处理；自定义 SSR 需手动配置；建议充分测试水合；性能因实现而异。