方案简介

Nuxt 3 Awesome Starter 是一个功能丰富的 Nuxt 3 启动模板，集成 TailwindCSS 3，并且可以通过 Nuxt Layer 零配置扩展。该项目将核心组件与主业务逻辑分离到 /app 文件夹中，同时支持以 nuxt layer 方式集成，方便把所有特性和组件带入你的项目。适合需要快速搭建 Nuxt 3 项目、开箱即用主题与组件体系的开发者。

亮点与能力

• Nuxt Layer 支持
• Tailwind CSS v3
• Headless UI
• Nuxt Icon
• 状态与存储管理（Pinia），自动导入 defineStore 为 definePiniaStore，自动导入 stores 文件夹
• Vue Composition 集合（VueUse）
• 内置 Awesome 组件与布局（Card、Form、Tabs、Pages 等）
• 主题管理（Color Mode），支持 light、dark、system 主题切换
• 可配置主题（主色、字体）

组成与分工

• Nuxt 3：核心框架，提供 Nuxt Layer 扩展机制与模块系统（~/modules/awesome.ts）
• Tailwind CSS v3：样式方案，主题可配置主色与字体
• Headless UI：无样式组件基础
• Pinia：状态与存储管理，自动导入 definePiniaStore 与 stores 目录
• VueUse：Vue 组合式函数集合
• Nuxt Icon：图标方案
• Theme Manager (Color Mode)：主题/暗色模式管理

前置要求

• 包管理器：项目使用 "pnpm" 或 "bun"
• Nuxt 3 环境

实施步骤

有两种使用方式：

1. 使用 Nuxt Layer（简单方式）

• 创建新的 Nuxt 3 项目：

bash
pnpm dlx nuxi@latest init my-app

• 安装 nuxt awesome 依赖：

bash
pnpm add @nuxt-awesome/theme

• 在 nuxt.config.ts 中添加 extends: '@nuxt-awesome/theme'：

ts

nuxt.config.ts

export default defineNuxtConfig({
devtools: { enabled: true },
extends: [
'@nuxt-awesome/theme',

• 之后可浏览 app.config.ts 查看模板中可修改的内容。
• 如果想把 nuxt awesome 作为根布局，删除根项目中的 app.vue。

2. 直接克隆仓库

bash
git clone https://github.com/viandwi24/nuxt3-awesome-starter

bash
pnpm install

bash
pnpm dev

克隆后直接在 app/ 文件夹中进行修改作为主项目文件夹。

使用与配置要点

• 通过 app.config.ts 配置模板可选项（如 Primary Colors、Font 等可配置主题）。
• 使用 Theme Switcher 在 light、dark、system 之间切换主题。
• 内置组件包括 Card、Content（@nuxt/content bridge）、Form（Text Input、Switch）、Action（Button、Link）、Tabs、Pages（Welcome、Error）、Action Sheet、Alert Banner 等，可直接在项目中使用。

注意事项与常见问题

• 项目使用 "pnpm" 或 "bun" 作为包管理器。
• 部分组件尚未完成：Modal、Toast 仍在 To Dos 中；🇮🇩 Language Switcher 也未完成。
• V1 版本可在仓库 v1 分支查看。

优缺点

• ✓ 零配置通过 Nuxt Layer 扩展
• ✓ 内置丰富组件与布局
• ✕ 依赖 pnpm 或 bun 包管理器
• ✕ 部分组件仍在待办未完成

出处

本方案挖掘自开源项目 viandwi24/nuxt3-awesome-starter，方案内容与实施命令均来自其 README 原文。