Nacr Design — Nuxt 3/4 企业级 Vue 组件库，80+ 组件开箱即用

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 自动导入，useToggle useLoading useChart 无需手动 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 全覆盖 + 自动导入，开发体验碾压手动注册

链接

一行代码，启动你的 Nuxt 项目

复制代码

pnpm add nacr-design

modules: ['nacr-design']

Nacr Design --- Nuxt 开发者的组件库，该有的全都有。