Nacr Design — Nuxt 3/4 企业级 Vue 组件库，80+ 组件开箱即用
全网首个深度集成 ECharts 图表 + Markdown 编辑器的 Nuxt UI 组件库
TypeScript 全覆盖 · 自动导入 · 按需加载 · 一行配置
为什么需要一款专门的 Nuxt 组件库？
Vue 生态从来不缺 UI 库，但 Nuxt 项目开发者面临一个尴尬的现实：
主流 Vue 组件库都不是原生 Nuxt Module。
这意味着你要手动写插件注册、处理 SSR 兼容、配置自动导入、解决客户端/服务端渲染冲突……本该专注于业务的时间，全花在了适配上。
Nacr Design 从第一天起就是为 Nuxt 而生的组件库。 它不是一个 Vue 组件库的"Nuxt 适配版"，而是一个原生 Nuxt Module——组件自动注册、Composables 自动导入、SSR 零配置、Tree-shaking 开箱即用。
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nacr-design'],
})
只需这一行，80+ 组件全部就位。
Nacr Design Nuxt 组件库核心特性
🔌 原生 Nuxt Module，零配置集成
- 组件自动注册，模板中直接使用
<NButton><NTable><NChart> - Composables 自动导入，
useToggleuseLoadinguseChart无需手动 import - SSR 完美兼容，无闪烁、无 hydration 报错
- 支持 Nuxt 3 与 Nuxt 4
📊 内置 ECharts 图表组件 —— 其他 Nuxt UI 库没有的
数据可视化是中后台项目的刚需。Nacr Design 在 Nuxt 组件库中首创性地内置了 NChart 组件与 useChart 组合式函数，ECharts 按需加载、自动 resize、自动销毁，一行代码出图。
<template>
<NChart :option="chartOption" height="300" />
</template>
📝 内置 Markdown 编辑器 —— Nuxt 博客/文档站首选
NMdEditor 编辑 + NMdRender 渲染，工具栏、实时预览、代码高亮一站式搞定。再也不用在 Nuxt 里折腾第三方富文本方案了。
🗂 企业级表格组件
NTable 支持排序、筛选、分页、固定列/头、可展开行、树形数据、虚拟滚动——后台管理最复杂的组件，我们帮你打磨好了。
🧭 专业级导航菜单
NMenu 垂直/水平模式、多级子菜单、折叠收起，搭配 NLayoutSider 轻松搭建后台侧边栏。
🎨 主题定制
CSS 变量 + BEM 命名，支持 NConfigProvider 全局配置，暗色模式切换轻松实现。
📦 Tree-shakable
基于 Nuxt Module 自动导入机制，未用的组件不会进入产物。ECharts 同样按需打包，用折线图就不带饼图。
Nuxt 组件库完整组件列表
基础组件（6）
Button · Icon · Divider · Space · Grid / GridItem · Layout
数据录入组件（19）
Input · Textarea · InputNumber · InputTag · Select · Cascader · TreeSelect · Checkbox / CheckboxGroup · Radio / RadioGroup · Switch · Slider · Rate · DatePicker · TimePicker · ColorPicker · Upload · Mention · VerificationCode · Form / FormItem
数据展示组件（20）
Table · Tag · Badge · Avatar / AvatarGroup · Card · Collapse · Carousel · Tabs / TabsPanel · Timeline · Descriptions · Statistic · Empty · Skeleton · Image · Comment · Calendar · Chart · Popover · Tooltip
导航组件（9）
Menu · Breadcrumb · Steps · Anchor · Dropdown · PageHeader · Pagination · Affix · BackTop
反馈组件（9）
Alert · Modal · Drawer · Notification · Popconfirm · Progress · Result · Spin · Skeleton
布局组件（9）
Layout · LayoutHeader · LayoutSider · LayoutContent · LayoutFooter · Grid / GridItem · Space · Split · OverflowList
工具组件（5）
ConfigProvider · Watermark · Trigger · MdEditor · MdRender
Composables（5）
useToggle · useLoading · useMessage · useNotification · useChart
总计 80+ 组件与组合式函数，覆盖中后台开发全场景。
安装与快速开始
# npm
npm install nacr-design
# pnpm（推荐）
pnpm add nacr-design
# yarn
yarn add nacr-design
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nacr-design'],
// 可选配置
nacrDesign: {
prefix: 'N', // 组件前缀，默认 'N'
global: true, // 全局注册，默认 true
iconfontUrl: '', // Iconfont 图标链接
},
})
然后在任意 .vue 文件中直接使用：
<template>
<NButton variant="primary">提交</NButton>
<NInput v-model="name" label="用户名" />
<NChart :option="option" height="300" />
</template>
<script setup>
const { state, toggle } = useToggle()
const { loading, withLoading } = useLoading()
const { success } = useMessage()
</script>
与其他 Nuxt / Vue 组件库对比
| 特性 | Nacr Design | Element Plus | Ant Design Vue | Naive UI |
|---|---|---|---|---|
| 原生 Nuxt Module | ✅ | ❌ 需适配 | ❌ 需适配 | ❌ 需适配 |
| 自动导入组件 | ✅ | 需配置 | 需配置 | 需配置 |
| 自动导入 Composables | ✅ | — | — | 需配置 |
| 内置 ECharts 图表 | ✅ | ❌ | ❌ | ❌ |
| 内置 Markdown 编辑器 | ✅ | ❌ | ❌ | ❌ |
| SSR 零配置 | ✅ | 需处理 | 需处理 | 需处理 |
| TypeScript 全量类型 | ✅ | ✅ | ✅ | ✅ |
| 支持 Nuxt 4 | ✅ | ❓ | ❓ | ❓ |
Nacr Design 是目前唯一一个将图表和 Markdown 编辑器作为一等公民纳入的 Nuxt 组件库。
谁在选择 Nacr Design？
- Nuxt 全栈开发者 — 不想再为 UI 库的 SSR 兼容性头疼
- 中后台项目团队 — 需要表格、图表、表单、菜单等全套企业级组件
- 内容型站点 — 博客、文档站需要 Markdown 编辑和渲染能力
- 追求 DX 的团队 — TypeScript 全覆盖 + 自动导入，开发体验碾压手动注册
链接
- 🏠 官网文档：http://design.nacr.cn/
- 📦 npm：https://www.npmjs.com/package/nacr-design
- 🐙 GitHub：https://github.com/nacrcn/Nacr-Design
- 🐙 Gitee：https://gitee.com/wuaxcn/nacr-design
一行代码，启动你的 Nuxt 项目
pnpm add nacr-design
modules: ['nacr-design']
Nacr Design — Nuxt 开发者的组件库，该有的全都有。
