# 核心 UI 组件库
pnpm add @nuxt/ui tailwindcss
 
# 内容管理（文档站、博客）
npx nuxi@latest module add content
 
# 图标系统
npx nuxi@latest module add icon
 
# 字体优化
npx nuxi@latest module add fonts
 
# 颜色模式
npx nuxi@latest module add color-mode
 
# 国际化
npx nuxi@latest module add i18n
 
# 图片优化
npx nuxi@latest module add image
 
# VueUse 集成
npx nuxi@latest module add vueuse

// nuxt.config.ts - 典型 UI 相关模块配置
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',           // 核心 UI 组件
    '@nuxt/content',      // 内容管理
    '@nuxtjs/i18n',       // 国际化
    '@vueuse/nuxt',       // VueUse 工具集
  ],
  css: ['~/assets/css/main.css'],
  // 各模块的详细配置
  ui: {
    content: true,
    prose: true
  },
  content: {
    contentDir: 'content'
  },
  i18n: {
    locales: [
      { code: 'zh', name: '中文' },
      { code: 'en', name: 'English' }
    ],
    defaultLocale: 'zh'
  }
})

<template>
  <UApp>
    <div class="min-h-screen">
      <!-- Nuxt UI 组件 -->
      <UNavbar>
        <template #logo>
          <span class="text-xl font-bold">My Nuxt App</span>
        </template>
      </UNavbar>
 
      <main class="container mx-auto p-8">
        <!-- Content 组件渲染 Markdown -->
        <ContentDoc />
      </main>
    </div>
  </UApp>
</template>
 
<script setup lang="ts">
// VueUse 组合式 API
const { isDark } = useColorMode()
const { x, y } = useMouse()
const { width } = useWindowSize()
</script>

pnpm add @nuxt/content

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

npx nuxi@latest module add icon

<!-- 使用图标 -->
<UIcon name="i-lucide-home" class="w-5 h-5" />
<UButton icon="i-lucide-search" />

npx nuxi@latest module add fonts

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }
})

npx nuxi@latest module add vueuse

<script setup lang="ts">
// 鼠标位置追踪
const { x, y } = useMouse()
 
// 窗口尺寸
const { width, height } = useWindowSize()
 
// localStorage 响应式绑定
const name = useLocalStorage('name', 'Guest')
 
// 深色模式检测
const isDark = useDark()
 
// 无限滚动
const { stop } = useInfiniteScroll(el, onScroll)
 
// 剪贴板
const { text, copy, copied } = useClipboard()
</script>

pnpm add @formkit/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@formkit/nuxt']
})

<template>
  <FormKit
    type="form"
    :actions="false"
  >
    <FormKit
      type="text"
      label="用户名"
      name="username"
      validation="required|length:3,20"
    />
    <FormKit
      type="email"
      label="邮箱"
      name="email"
      validation="required|email"
    />
    <FormKit
      type="password"
      label="密码"
      name="password"
      validation="required|length:8,32"
    />
  </FormKit>
</template>

pnpm add @vueuse/motion

<script setup lang="ts">
import { useMotion } from '@vueuse/motion'
 
const { apply, set } = useMotion()
</script>
 
<template>
  <div
    v-motion
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0, transition: { duration: 500 } }"
  >
    动画元素
  </div>
</template>

npx nuxi@latest module add image

<NuxtImg
  src="/images/hero.jpg"
  width="800"
  height="400"
  format="webp"
  loading="lazy"
/>

<script setup lang="ts">
const colorMode = useColorMode()
// colorMode.value: 'light' | 'dark' | 'system' | 自定义
</script>
 
<template>
  <UButton @click="colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'">
    切换主题
  </UButton>
</template>

# 1. 创建 Nuxt 项目
npx nuxi@latest init my-project
cd my-project
 
# 2. 添加所需 UI 模块
npx nuxi@latest module add ui
npx nuxi@latest module add content
npx nuxi@latest module add vueuse
 
# 3. 启动开发模式
pnpm dev
 
# 4. 验证
pnpm typecheck
pnpm lint
pnpm test
 
# 5. 构建
pnpm build

# 使用 Turborepo 管理 Monorepo
apps/
├── web/          # Nuxt 主应用
├── docs/         # 文档站点
└── admin/        # 管理后台
packages/
├── ui/           # 共享 UI 组件
├── config/       # 共享配置
└── types/        # 共享类型

# GitHub Actions
name: CI
on: [push, pull_request]
jobs:
  verify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm typecheck
      - run: pnpm lint
      - run: pnpm test
      - run: pnpm build

# Nuxt 项目标准验证流程
pnpm typecheck  # TypeScript 类型检查
pnpm lint       # ESLint 代码检查
pnpm test       # 单元测试
pnpm build      # 生产构建
pnpm preview    # 预览构建结果