在 Nuxt 中使用

通过 Nuxt module 自动注册全部组件

安装

npm install @reglow/reui

配置

在 nuxt.config.ts 中添加模块：

export default defineNuxtConfig({
  modules: ["@reglow/reui/nuxt"],
  reui: {
    prefix: "",           // 可选，组件名前缀（如 "R" -> <RButton>）
    locale: "zh-CN",      // 可选，默认语言：zh-CN / zh-TW / en-US
    theme: {              // 可选，主题配置
      mode: "light",
      primaryColor: "blue",
      radius: "0.5",
    },
    injectStyles: true,   // 可选，是否注入 style.css（默认 true）
  },
});

Nuxt module 会自动：

  • 注册全部组件（支持前缀）
  • 注入 style.css（可通过 injectStyles: false 关闭）
  • 注入运行时插件（客户端初始化语言与主题）

使用

配置后直接在模板中使用组件，无需手动 import：

<template>
  <Button>按钮</Button>
  <Input placeholder="请输入" />
  <Modal v-model:visible="visible">内容</Modal>
</template>

组件前缀

如果与项目中已有的组件重名，可通过 prefix 添加前缀：

export default defineNuxtConfig({
  modules: ["@reglow/reui/nuxt"],
  reui: {
    prefix: "R",  // <Button> -> <RButton>
  },
});

<template>
  <RButton>按钮</RButton>
  <RInput placeholder="请输入" />
</template>

已有 Tailwind 的项目

如果项目已有 Tailwind CSS（如 shadcn-docs-nuxt），设置 injectStyles: false 避免 reset 冲突：

export default defineNuxtConfig({
  modules: ["@reglow/reui/nuxt"],
  reui: {
    prefix: "R",
    injectStyles: false,
  },
});

ConfigProvider

在 app.vue 中包裹 ConfigProvider 统一配置：

<template>
  <ConfigProvider :locale="locale" :theme="theme">
    <NuxtPage />
  </ConfigProvider>
</template>

SSR 兼容性

ReUI 组件默认做了服务端渲染守卫，可直接在 Nuxt SSR 中使用，无需额外配置。

需要浏览器能力的组件

以下组件依赖 DOM / 浏览器 API，在服务端会渲染为占位或空壳，客户端挂载后自动激活（水合）：

  • Cropper、SlideCaptcha、QRCode、AudioPlayer、VideoPlayer
  • Editor（Tiptap）、Tour、Affix、BackTop、Watermark、MasonryGrid

这些组件无需手动处理，SSR 阶段不会崩溃，交互在客户端生效。

命令式 API 仅客户端调用

Modal.info / success / error / warning / confirm、useNotification、useToast 等命令式 API 会创建 DOM 节点，只能在客户端调用（事件回调、onMounted 等），不要在 setup 顶层或服务端逻辑中直接调用：

<script setup>
import { Modal } from "@reglow/reui";

// ❌ 不要在 setup 顶层直接调用
// Modal.confirm({ title: "确认" });

// ✅ 在事件回调中调用
function handleDelete() {
  Modal.confirm({
    title: "确定删除？",
    onOk: () => { /* ... */ },
  });
}
</script>

纯客户端渲染

若某个区域只应在浏览器中渲染（例如依赖 localStorage 或第三方浏览器 SDK），可用 Nuxt 的 <ClientOnly> 包裹：

<template>
  <ClientOnly>
    <VideoPlayer src="/video.mp4" />
  </ClientOnly>
</template>

TypeScript

ReUI 提供完整的类型定义，Nuxt module 会自动配置类型推断，无需额外配置。

在 Vue 中使用
在 Vue 3 应用中接入 @reglow/reui
主题定制
主色、中性色、圆角、字体与暗色模式