NuxtVue启动器

nuxt3-starter-template — Nuxt 启动器模板

作者 HassanKadhim

基于 Nuxt 3 的启动器模板，预置 UnoCSS、Maz-UI、Supabase、Pinia、vue-chartjs 与 @nuxtjs/color-mode 等依赖，供开发者快速搭建项目骨架。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

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

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

全部页面与视图 2

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

采集于 2026-10-03查看来源

值得关注的模板亮点

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

01

基于 Nuxt 3 的启动器工程，安装后可直接进入开发

02

预置 UnoCSS，支持 shortcuts、attributify、纯 CSS 图标与 @apply 指令

03

集成 Maz-UI 组件库，可直接使用其 Vue/Nuxt 组件

04

接入 Supabase，覆盖数据库、认证、自动生成 API、函数与文件存储

05

内置 Pinia 状态管理与 vue-chartjs 图表封装

06

通过 @nuxtjs/color-mode 提供明暗模式与系统主题检测

模板详细介绍

这是一个 Nuxt 3 启动器模板，仓库采用 MIT 许可，主要作用是提供一个已接入若干常用依赖的初始工程，省去从零配置的时间。

按 README 说明，模板安装使用 yarn：先执行 yarn install，再执行 yarn dev 启动开发服务器。

模板预置的依赖包括：UnoCSS（原子化 CSS 引擎，支持 shortcuts、attributify、纯 CSS 图标、@apply 指令等）、Maz-UI（面向 Vue 与 Nuxt 的独立组件库）、Supabase（开源 Firebase 替代方案，提供 Postgres 数据库、认证、自动生成 API、函数与文件存储）、vue-chartjs（Chart.js 的 Vue 封装，用于创建可复用的图表组件）、Pinia（Vue 状态管理库）以及 @nuxtjs/color-mode（明暗模式切换与系统主题自动检测）。

需要注意的限制：README 中未给出页面结构、路由或业务示例的说明，模板本身不包含成品站点内容；Supabase 等外部服务需自行注册与配置，并核对相应额度与收费；模板中的第三方素材（图片、字体、图标等）需单独核对其许可。仓库更新时间为 2022 年，依赖版本请以实际 package.json 为准。

Nuxt启动器

适合你的项目吗？

适用场景

  • 需要快速搭建 Nuxt 3 项目骨架并已确定使用上述依赖组合的开发者
  • 希望以 UnoCSS 作为样式方案、Maz-UI 作为组件库起步的前端项目
  • 计划使用 Supabase 作为后端（数据库、认证、存储）的原型开发
  • 需要在 Nuxt 3 中集成 Pinia 状态管理或 vue-chartjs 图表的项目
  • 需要明暗模式切换与系统主题自动检测的站点

适合人群

  • 熟悉 Nuxt 3 与 Vue 3 的开发者
  • 接受以 UnoCSS 与 Maz-UI 作为样式和组件方案的团队
  • 准备使用 Supabase 作为后端服务的项目
  • 需要图表展示或明暗主题切换的前端工程

上手与定制指南

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

  1. 1

    安装依赖：yarn install

  2. 2

    启动开发服务器：yarn dev

  3. 3

    Supabase 等外部服务需自行创建项目并配置密钥，同时核对额度与收费

  4. 4

    模板中的图片、字体、图标等第三方素材需单独核对其许可

  5. 5

    仓库最后更新于 2022 年，依赖版本以实际 package.json 为准，升级前请先验证兼容性

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 模板集成 Supabase 作为后端，使用其数据库、认证、API、函数与文件存储等功能需自行注册 Supabase 账号并创建项目，可能涉及外部服务的额度与收费，需自行核对。
  • 安装依赖需使用 yarn 包管理器执行 yarn install，随后用 yarn dev 启动开发服务器。
  • README 提及 Firebase 集成；启用相关动态功能前需自行配置，并核对 Firebase 的额度与收费。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Supabase](https://supabase.com) is an open source Firebase alternative

README 原文

yarn install

README 原文
https://github.com/HassanKadhim/nuxt3-starter-template/blob/main/LICENSEhttps://github.com/HassanKadhim/nuxt3-starter-template/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 68 / 100
技术栈
Nuxt · Vue
网站类型
启动器
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2022-10-05
截图检查日期
2026-10-03

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: e515095e2e0fc5bfd57971d7b0a07679c5ab67aa48486f7313267498c8b04443

2026-10-03T01:58:44.249Z

来源文件 / 仓库
<br>

<p align="center">
<img src="https://nuxtjs.org/design-kit/colored-white-text.png" style="width:350;" />
</p>

<h1 align="center">Nuxt3 Starter</h1>


## Installation



```bash
yarn install
```


```bash
yarn dev
```

## Included
### Unocss
Inspired by [Windi CSS](http://windicss.org/), [Tailwind CSS](https://tailwindcss.com/), and [Twind](https://github.com/tw-in-js/twind), but:

- [Fully customizable](#configurations) - no core utilities, all functionalities are provided via presets.
- No parsing, no AST, no scanning, it's **INSTANT** (5x faster than Windi CSS or Tailwind JIT).
- ~6kb min+brotli - zero deps and browser friendly.
- [Shortcuts](#shortcuts) - aliasing utilities, dynamically.
- [Attributify mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify/) - group utilities in attributes.
- [Pure CSS Icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons/) - use any icon as a single class.
- [Variant Groups](https://github.com/unocss/unocss/tree/main/packages/transformer-variant-group) - shorthand for group utils with common prefixes.
- [CSS Directives](https://github.com/unocss/unocss/tree/main/packages/transformer-directives) - reuse utils in CSS with `@apply` directive.
- [Compilation mode](https://github.com/unocss/unocss/tree/main/packages/transformer-compile-class/) - synthesizes multiple classes into one at build time.
- [Inspector](#inspector) - inspect and debug interactively.
- [CSS-in-JS Runtime build](https://github.com/unocss/unocss/tree/main/packages/runtime) - use UnoCSS with one line of CDN import.
- [VS Code extension](https://marketplace.visualstudio.com/items?itemName=antfu.unocss)
- Code-splitting for CSS - ships minimal CSS for MPA.

---

### Maz-UI

[![vue 3](https://img.shields.io/badge/vue-3-42b983.svg)](https://vuejs.org)
[![nuxt 3](https://img.shields.io/badge/nuxt-3-42b983.svg)](https://v3.nuxtjs.org/)

[![npm](https://img.shields.io/npm/v/maz-ui/latest.svg)](https://www.npmjs.com/package/maz-ui)
[![license](https://img.shields.io/github/license/LouisMazel/maz-ui.svg)](https://github.com/LouisMazel/maz-ui/blob/master/LICENSE)
[![Downloads](https://img.shields.io/npm/dm/maz-ui.svg)](https://npm-stat.com/charts.html?package=maz-ui)

[![maintainability](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/maintainability)](https://codeclimate.com/github/LouisMazel/maz-ui/maintainability)
[![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/LouisMazel/maz-ui/test_coverage)

[![bundlephobia_tree](https://badgen.net/bundlephobia/tree-shaking/[email protected])](https://bundlephobia.com/package/[email protected])
[![bundlephobia_zip](https://badgen.net/bundlephobia/min/[email protected])](https://bundlephobia.com/package/[email protected])
[![bundlephobia_zip](https://badgen.net/bundlephobia/minzip/[email protected])](https://bundlephobia.com/package/[email protected])

> [Maz-ui](https://louismazel.github.io/maz-ui/) is a standalone components library and tools for [Vue.JS](https://vuejs.org) & [Nuxt.JS](https://nuxtjs.org/) (v3.x)

## Documentation & Components

[Documentation & Components](https://louismazel.github.io/maz-ui-3/)

---

### Supabase

[Supabase](https://supabase.com) is an open source Firebase alternative. We're building the features of Firebase using enterprise-grade open source tools.

- [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
- [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth)
- [x] Auto-generated APIs.
  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api)
  - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/api#realtime-api)
  - [x] GraphQL (Beta). [Docs](https://supabase.com/docs/guides/api#graphql-api)
- [x] Functions.
  - [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
  - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
- [x] File Storage. [Docs](https://supabase.com/docs/guides/storage)
- [x] Dashboard



#### Documentation

For full documentation, visit [supabase.com/docs](https://supabase.com/docs)

To see how to Contribute, visit [Getting Started](./DEVELOPERS.md)

---

### vue-chartjs

<img align="right" width="150" height="150" alt="vue-chartjs logo" src="https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/vue-chartjs.png">

**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.

Supports Chart.js v3 and v2.

[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
[![Build Status](https://img.shields.io/github/workflow/status/apertureless/vue-chartjs/CI.svg)](https://github.com/apertureless/vue-chartjs/actions)
[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)
[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
[![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs)
[![Donate](https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/donate.svg)](https://www.paypal.me/apertureless/50eur)
[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)

---

### Pinia

> Intuitive, type safe and flexible Store for Vue

- 💡 Intuitive
- 🔑 Type Safe
- ⚙️ Devtools support
- 🔌 Extensible
- 🏗 Modular by design
- 📦 Extremely light

Pinia works with both Vue 2 and Vue 3.

Pinia is the most similar English pronunciation of the word _pineapple_ in Spanish: _piña_. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It's also a delicious tropical fruit indigenous to South America.

#### 👉 [Demo with Vue 3 on StackBlitz](https://stackblitz.com/github/piniajs/example-vue-3-vite)

#### 👉 [Demo with Nuxt 3 on StackBlitz](https://stackblitz.com/github/piniajs/example-nuxt-3)

---

### @nuxtjs/color-mode

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![License][license-src]][license-href]

> 🌑 Dark and 🌕 Light mode with auto detection made easy with Nuxt

[![nuxt-color-mode](https://user-images.githubusercontent.com/904724/79349768-f09cf080-7f36-11ea-93bb-20fae8c94811.gif)](https://color-mode.nuxtjs.app/)

<p align="center">
  <a href="https://color-mode.nuxtjs.app">Live demo</a>
</p>

- [✨ &nbsp;Release Notes](https://color-mode.nuxtjs.org/releases)
- [📖 &nbsp;Documentation](https://color-mode.nuxtjs.org)
- [▶️ &nbsp;Online playground](https://stackblitz.com/edit/nuxt-color-mode)

## Features

- Nuxt 3 and Nuxt Bridge support
- Add `.${color}-mode` class to `<html>` for easy CSS theming
- Force a page to a specific color mode (perfect for incremental development)
- Works with client-side and universal rendering
- Auto detect system [color-mode](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode)
- Sync dark mode across tabs and windows 🔄
- Supports IE9+ 👴

[📖 &nbsp;Read more](https://color-mode.nuxtjs.org)

**Note**: v3 of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt Bridge](https://v3.nuxtjs.org/). If you're looking for the previous version of this module, check out [the previous docs](https://v2.color-mode.nuxtjs.org/), or [read more about the differences](https://color-mode.nuxtjs.org/#migrating-to-v3).
反馈内容错误

看看同类模板

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

laravel-nuxt

laravel-nuxt

A Laravel-Nuxt starter kit.

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 · 启动器

bloggrify

bloggrify

Run a blog from Markdown files. Themes, SEO, analytics, newsletter and comments preconfigured. Like Docus, but…

Nuxt · 博客

vitify-nuxt

vitify-nuxt

🔽🏔 Vuetify + Nuxt Starter Template

Nuxt · 后台