别再从零搭后台：nuxt-shadcn-dashboard 让你半小时拥有生产级 Nuxt 4 仪表盘-北京尧图网络

别再从零搭后台nuxt-shadcn-dashboard 让你半小时拥有生产级 Nuxt 4 仪表盘【免费下载链接】nuxt-shadcn-dashboardTemplate Dashboard with Nuxt 4 Shadcn TailwindCSS 4项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-shadcn-dashboard每次搭管理后台侧边栏、数据表格、主题切换都得从头写光 UI 骨架就能耗掉一周。nuxt-shadcn-dashboard 是一套 Nuxt 4 Shadcn Vue TailwindCSS 4 的管理后台模板把仪表盘、任务表、看板、认证页直接做成了现成页面。用它起步UI 层面的重复开发基本能省掉 2~3 周。它是什么项目速览nuxt-shadcn-dashboardMIT 协议的开源仪表盘模板当前版本 v1.0.2解决的是后台 UI 骨架反复重做的问题布局、侧边栏、主题、组件库、常用业务页全部内置技术栈Nuxt 4、Shadcn Vue基于 reka-ui、TailwindCSS 4全项目 TypeScript适合有 Vue 3 基础、需要快速交付后台的团队或个人想给项目配管理端的人跑起来只需要这几条命令要求 Node 22.x、pnpm 9git clone https://gitcode.com/gh_mirrors/nu/nuxt-shadcn-dashboard cd nuxt-shadcn-dashboard pnpm install pnpm dev它到底能帮你省掉哪些活组件库60 组件覆盖后台常见需求app/components/ui/下内置了 60 多个组件数据展示、表单输入、导航、反馈四类场景都有现成答案。几个关键点的底层实现都选得比较扎实表格基于 tanstack/vue-table排序、筛选、分页开箱即用表单组合 vee-validate zod还带 auto-form 可以从 schema 直接生成图表提供折线、柱状、面积、环形四种基于 unovis 渲染。组件展示页在 components/ 路由组下每个组件一页可以直接当用法参考。主题与侧边栏改一处配置换整套外观主题色、明暗模式、侧边栏形态全部集中在app/app.config.ts这一个入口里配置。仓库里的app/composables/useAppSettings.ts负责把这份默认配置和用户在浏览器里的选择合并再持久化到 cookie所以设置页里切换主题会即时生效appSettings: { sidebar: { collapsible: offcanvas, // offcanvas | icon | none side: left, // left | right variant: inset, // sidebar | floating | inset }, theme: { color: default, // 9 种主题色可选 type: scaled, // default | mono | scaled }, }业务页面仪表盘、数据表、看板开箱即用app/pages/按路由组划分auth登录、注册、OTP 验证、忘记密码、error401/403/404/500/503 五种错误页、settings资料、外观、通知等设置页外加首页仪表盘、tasks、kanban、email 四个独立页面。首页是四张统计卡片加访客趋势图带时间范围筛选tasks 页是一张完整数据表支持列排序、分面筛选、分页和行操作kanban 页支持拖拽排序数据落在 localStorage刷新不丢。从 clone 到本地跑通3 步搞定克隆仓库git clone https://gitcode.com/gh_mirrors/nu/nuxt-shadcn-dashboard进入目录安装依赖pnpm installpostinstall 会自动执行 nuxt prepare启动开发服务器pnpm dev浏览器打开 http://localhost:3000跑起来之后可以先调的几个可选配置可选配置说明侧边栏 collapsible / side / variant折叠方式 offcanvas、icon、none位置左/右形态 sidebar、floating、inset主题 color / type9 种主题色default、scaled、mono 三种类型生效方式改配置后需清除浏览器 app_settings cookie或在设置页在线切换构建与部署只需要这几条pnpm build pnpm preview pnpm generate哪些项目类型用它最顺手内部管理后台CRM、运维、审批这类系统要的就是侧边栏数据表表单模板的骨架和这些需求高度重合你只需要接上自己的 API数据看板与监控页统计卡片、四类图表、时间范围筛选组件都是现成的精力可以全放在数据层项目自带的管理端给开源项目或个人作品补一个管理后台时看板页和任务页可以直接复用不用自己造架构与工程实践状态管理Pinia 通过 pinia/nuxt 集成应用级设置则走 cookie 持久化的 useAppSettings composable不依赖 store性能Nuxt 4 按路由自动代码分割nuxt/icon 和 nuxt/fonts 按需加载图标与字体避免整包引入可访问性组件基于 reka-uiRadix 的 Vue 实现ARIA 属性和键盘导航是默认行为不用逐个补表单校验vee-validate zodauto-form 组件支持从 schema 直接渲染表单工程化ESLintantfu 风格 vue-tsc 类型检查lint 和 typecheck 都在 npm scripts 里路由组织app/pages/下用括号目录划分 auth、error、components、settings 四个路由组页面加路由互不干扰社区状态与贡献入口项目由独立开发者维护当前发布到 v1.0.2用 release-it 管理版本仓库里配了 Renovate依赖升级走自动化 PR所以 Nuxt、TailwindCSS 这些核心依赖版本跟得比较紧。参与方式提 issue报告 bug 或提功能请求提 PR改进组件、修样式或新增业务页面完善文档components/ 路由组下每个组件都有对应展示页缺示例的都可以补之前搭后台要重写一遍侧边栏、表格和主题切换的活现在 clone 下来改改就能开工。这套模板的价值很直白UI 骨架和常见业务页全部就位你只管接数据。如果你正在找一套能直接落地的 Nuxt 后台脚手架值得花十分钟 clone 下来跑一遍。【免费下载链接】nuxt-shadcn-dashboardTemplate Dashboard with Nuxt 4 Shadcn TailwindCSS 4项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-shadcn-dashboard创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

别再从零搭后台：nuxt-shadcn-dashboard 让你半小时拥有生产级 Nuxt 4 仪表盘

相关推荐

机器人应用泛化：从汽车产线到千行百业的技术变革与实践指南

Sony相机解锁实战：装第三方应用与解锁隐藏设置的完整方法

DINOv3 目录结构与训练入口完整走读：如何从一份 YAML 跑到一次预训练任务

更多资讯

hyperframes揭秘：Rust hyper库HTTP帧处理机制全解析

3D展厅设计不是建模，而是空间叙事重构

矩阵分析期末高分攻略：基与过渡矩阵、Jordan标准型等八大题答题模板

效率工具ponytail：像扎马尾一样轻松收集与整理零散信息

用 PIL 画一套 120 个动态表情包：从 IP 引擎到微信上架的完整工程

UDEC建模参数化：数据表与FISH函数告别手动改命令流

今日更新

学生选课系统DFD图绘制指南：边界划分与分层校验实战

JIRA敏捷落地：Scrum角色权限、Sprint与燃尽图避坑指南

SEMI S8人机工程验收实战：从条款拆解到现场实测的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？