---
description: Initializes a new Vue 3 + Vite + Tailwind CSS + JavaScript project with best-practice directory structure. Use when scaffolding a new Vue 3 project, setting up project conventions, or bootstrapping a frontend app.
---

# Vue 3 Project Setup

Initialize a production-ready Vue 3 + JavaScript project.

## Steps

1. **Create project with Vite**:
   ```bash
   pnpm create vite@latest <project-name> --template vue
   cd <project-name>
   pnpm install
   ```

2. **Add Tailwind CSS v4**:
   ```bash
   pnpm add -D tailwindcss @tailwindcss/vite
   ```

3. **Configure Vite** — Update `vite.config.js`:
   ```js
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import tailwindcss from '@tailwindcss/vite'

   export default defineConfig({
     plugins: [vue(), tailwindcss()],
   })
   ```

4. **Setup CSS** — Replace `src/style.css` content:
   ```css
   @import 'tailwindcss';
   ```

5. **Create directory structure**:
   ```
   src/
   ├── main.js
   ├── App.vue
   ├── style.css
   ├── composables/     # Shared state (useXxx.js)
   ├── components/      # UI components (.vue)
   ├── styles/          # Global CSS (themes, animations)
   │   └── themes/
   ├── assets/          # Static assets
   └── i18n.js          # (optional) internationalization
   ```

6. **Generate CLAUDE.md** — Run the `vue-claude-md` skill to create project documentation

7. **Generate initial CLAUDE.md**:
   ```bash
   cat > CLAUDE.md << 'EOF'
   # CLAUDE.md

   本文件为 Claude Code 在此仓库中工作时提供指引。

   ## 常用命令

   \```bash
   pnpm dev       # 启动开发服务器 (localhost:5173)
   pnpm build     # 生产构建（输出到 dist/）
   pnpm preview   # 预览生产构建
   \```

   ## 架构概览

   **技术栈**：Vue 3 + Vite + Tailwind CSS v4 + JavaScript（无 TypeScript）

   **状态管理**：使用 Vue 3 组合式函数（composables），未使用外部状态库。

   **核心约定**：
   - Tailwind 类负责布局、间距、响应式
   - CSS 自定义属性负责所有颜色和阴影
   - 组件使用 `<script setup>` + Composition API
   - Props 向下传递，emit 向上通信
   EOF
   ```

## Optional Additions

- **i18n**: Create `src/i18n.js` with dictionary-based translations
- **Theme system**: Use the `vue-theme-system` skill to add multi-theme support
- **Testing**: `pnpm add -D vitest @vue/test-jsdom` (note: many Vue 3 JS projects skip TypeScript-tied test utils)

## Verify Setup

```bash
pnpm dev
# Open http://localhost:5173
```