NuxtVueVite后台启动器

vitify-nuxt — Nuxt 后台模板

作者 kingyue737

Vitify Nuxt 是一个基于 Nuxt 与 Vuetify 的后台管理启动模板，内置抽屉式布局、自动导航与面包屑、通知状态、ECharts 图表、主题与暗色模式，以及基于 nuxt-auth-utils 的认证。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

默认后台布局：抽屉、页头与页脚

02

导航抽屉与面包屑根据路由自动生成

03

内置通知 store 与基于 nuxt-echarts 的数据可视化

04

支持主题色定制、暗色模式与响应式布局

05

通过 nuxt-auth-utils 集成认证，README 以 GitHub OAuth 为例

06

TypeScript 全覆盖，含单元、组件与 E2E 测试配置

模板详细介绍

Vitify Nuxt 是面向后台管理界面的启动模板，把 Nuxt 与 Vuetify 组合在一起，并预置了后台常用的页面骨架。默认布局包含抽屉、页头与页脚；导航抽屉和面包屑根据路由自动生成，减少手工维护菜单的工作。模板使用 Pinia 管理状态，内置通知 store；图表部分接入 nuxt-echarts 做数据可视化；界面支持主题色定制与暗色模式，并采用响应式布局。认证由 nuxt-auth-utils 提供，README 以 GitHub OAuth 为例说明配置方式，也可以换成该模块支持的其他 OAuth 提供方或自行实现。

技术栈方面，项目基于 Nuxt，使用 Vite 与 pnpm，TypeScript 覆盖全部代码，并提供基于 @nuxt/test-utils 的单元、组件与 E2E 测试配置。代码风格使用 Prettier（单引号、无分号）与 ESLint flat config。README 还列出可选的部署方式 Netlify 零配置，以及若干同类变体：不含 Nuxt 的 Vue 3 版本、Electron 版本，以及带 i18n、浏览器兼容与 mock server 的 Vue 2.7 版本。

使用限制：模板本身是 MIT 许可的免费代码，但演示图片、字体、图标等第三方素材需按各自许可核对；域名、托管、数据库、支付或 AI 等外部服务可能另行收费。README 中的功能描述不代表生产就绪程度，实际使用前应自行核对依赖与配置。

NuxtVueVite后台启动器

适合你的项目吗？

适用场景

  • 需要快速搭建带侧边导航与面包屑的后台管理界面
  • 希望在 Nuxt 项目中使用 Vuetify 组件与主题系统
  • 需要内置图表展示与通知状态的后台页面
  • 需要接入 OAuth 登录的后台应用原型
  • 作为 GitHub 模板或通过 degit 克隆后开始新项目

适合人群

  • 使用 Nuxt 与 Vuetify 开发后台管理系统的团队
  • 需要现成后台布局与路由导航骨架的开发者
  • 希望以 TypeScript 与 pnpm 为基础起步的项目
  • 需要认证、图表、暗色模式等后台常见能力的启动项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    可通过 GitHub 模板生成仓库，或使用 npx degit kingyue737/vitify-nuxt my-vitify-app 克隆到本地

  2. 2

    安装依赖使用 pnpm i，开发服务器通过 pnpm run dev 启动在 http://localhost:3000

  3. 3

    使用 GitHub OAuth 时需创建 OAuth 应用，Homepage url 设为 http://localhost:3000，Callback url 设为 http://localhost:3000/api/auth/github

  4. 4

    在 .env 中配置 NUXT_OAUTH_GITHUB_CLIENT_ID 与 NUXT_OAUTH_GITHUB_CLIENT_SECRET

  5. 5

    为生成密封会话，需在 .env 中设置至少 32 个字符的 NUXT_SESSION_SECRET

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 使用内置认证功能需自行注册 GitHub OAuth 应用并配置客户端 ID 与密钥，属于外部服务账号要求。
  • 生成密封会话需在 .env 中设置至少 32 字符的 NUXT_SESSION_SECRET，否则需依赖开发模式自动生成。
  • README 推荐的部署方式依赖 Netlify 等外部托管服务，可能产生额外费用。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Create a [GitHub OAuth Application](https://github.com/settings/applications/new) with:

README 原文

NUXT_SESSION_SECRET=your-super-long-secret-for-session-encryption

README 原文

- ☁️ Deploy on [Netlify](https://www.netlify.com/), zero-config

README 原文
https://github.com/kingyue737/vitify-nuxt/blob/main/LICENSEhttps://github.com/kingyue737/vitify-nuxt/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 96 / 100
技术栈
Nuxt · Vue · Vite
网站类型
后台 · 启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-29
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Nuxt。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: ad89ba73305b2498f09ffbdcc0c3261115181a1b20d3332dbc49a83422561ca2

2026-10-01T14:20:11.937Z

来源文件 / 仓库
<p align="center">
  <img alt="Vitify - Opinionated Vuetify Admin Starter Template" src="public/vitify-nuxt.svg" width=100px/>
</p>
<h1 align="center">Vitify Nuxt</h1>

<p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/nuxt-4-brightgreen.svg" alt="nuxt">
  </a>
  <a href="https://github.com/vuetifyjs/vuetify">
    <img src="https://img.shields.io/badge/vuetify-4-blue.svg" alt="vuetify">
  </a>
  <a href="https://github.com/kingyue737/vitify-admin/blob/main/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  </a>
</p>

<p align='center'>
<b>Vuetify</b> + <b>Nuxt</b>, Opinionated Admin Starter Template<br><br>
</p>

<p align='center'>
<a href="https://vitify-nuxt.netlify.app/">Live Demo<br><br></a>
</p>

## Features

- 💚 [Nuxt](https://nuxt.com/) - SPA, ESR, File-based routing, components auto importing, modules, etc

- 💥 SSR out of the box - powered by [Vuetify Nuxt module](https://github.com/vuetifyjs/nuxt-module)

- ⚡️ [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness

- 🍍 [State Management via Pinia](https://pinia.vuejs.org/)

- 📥 APIs auto importing - for Composition API, VueUse and custom composables

- ☁️ Deploy on [Netlify](https://www.netlify.com/), zero-config

- 🦾 TypeScript 100%

- 🧪 Unit, Component and E2E Testing with [@nuxt/test-utils](https://github.com/nuxt/test-utils)

<br>

### Admin Starter Template

- 🪟 Default layout with drawer, header and footer

- 🧭 Auto-generated navigation drawer and breadcrumbs based on routes

- 🔔 Notification store

- 📉 Data visualization with [nuxt-echarts](https://github.com/kingyue737/nuxt-echarts)

- 🎨 Theme color customization and dark mode

- 📱 Responsive layout

- 🛡️ Authentication backed-in using [nuxt-auth-utils](https://github.com/Atinux/nuxt-auth-utils)

## Variants

- [vitify-next](https://github.com/kingyue737/vitify-next) - Lightweight Vue 3 version without Nuxt

- [vitify-electron](https://github.com/kingyue737/vitify-electron) - Vuetify + Nuxt + Electron starter
- [vitify-admin](https://github.com/kingyue737/vitify-admin) - Vue 2.7 with i18n, browser compatibility and mock server

## Pre-packed

### Nuxt Modules

- [Vuetify Nuxt Module](https://github.com/vuetifyjs/nuxt-module) - Zero-config Nuxt Module for Vuetify
- [VueUse](https://github.com/vueuse/vueuse) - Collection of useful composition APIs
- [Pinia](https://github.com/vuejs/pinia) - Intuitive, type-safe, light and flexible Store for Vue
- [Nuxt Icon](https://github.com/nuxt/icon) - Icon module for Nuxt with 200,000+ ready to use icons from Iconify
- [Nuxt ECharts](https://github.com/kingyue737/nuxt-echarts) - Nuxt module for Apache ECharts™
- [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) - Minimalist Authentication module for Nuxt

### Coding Style

- [Prettier](https://prettier.io/), single quotes, no semi
- [ESLint flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new) with adapted [@nuxt/eslint](https://github.com/nuxt/eslint), future-proof

### Dev tools

- [TypeScript](https://www.typescriptlang.org/)
- [pnpm](https://pnpm.js.org/) - Fast, disk space efficient package manager
- [Netlify](https://www.netlify.com/) - zero-config deployment
- [VS Code Extensions](./.vscode/extensions.json)
  - [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - TypeScript support inside Vue SFCs
  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Find and fix problems in your code
  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatter
  - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

## Try it now!

### GitHub Template

[Create a repo from this template on GitHub](https://github.com/kingyue737/vitify-nuxt/generate).

### Clone to local

If you prefer to do it manually with the cleaner git history

```bash
npx degit kingyue737/vitify-nuxt my-vitify-app
cd my-vitify-app
pnpm i
```

### Authentication Setup

> You can switch to any [OAuth Providers](https://github.com/Atinux/nuxt-auth-utils#supported-oauth-providers) supported by [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) or write your own.

Create a [GitHub OAuth Application](https://github.com/settings/applications/new) with:

- Homepage url: `http://localhost:3000`
- Callback url: `http://localhost:3000/api/auth/github`

Add the variables in the `.env` file:

```bash
NUXT_OAUTH_GITHUB_CLIENT_ID="my-github-oauth-app-id"
NUXT_OAUTH_GITHUB_CLIENT_SECRET="my-github-oauth-app-secret"
```

To create sealed sessions, you also need to add `NUXT_SESSION_SECRET` in the `.env` with at least 32 characters:

```bash
NUXT_SESSION_SECRET=your-super-long-secret-for-session-encryption
```

Nuxt Auth Utils generates one for you when running Nuxt in development the first time if no `NUXT_SESSION_PASSWORD` is set.

### Development

Start the development server on http://localhost:3000

```bash
pnpm run dev
```

## License

[MIT License](./LICENSE)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

laravel-nuxt

laravel-nuxt

A Laravel-Nuxt starter kit.

Nuxt · 启动器

dashboard

dashboard

Nuxt Dashboard Template made with Nuxt UI.

Nuxt · 后台

nuxt-shadcn-dashboard

nuxt-shadcn-dashboard

Template Dashboard with Nuxt 4 + Shadcn + TailwindCSS 4

Nuxt · 后台

canvas

canvas

Portfolio template made with Nuxt 3, Nuxt Content v3, NuxtUI v3 and TailwindCSS v4

Nuxt · 作品集

nuxt3-starter

nuxt3-starter

💚 A Better Nuxt 3 Starter Template，generate by nuxi.

Nuxt · 启动器

starter

starter

Nuxt Starter Template for Nuxt UI.

Nuxt · 启动器