vue-email

A Vue port of React Email. High-quality, unstyled components for creating emails using Vue and TypeScript.

It reduces the pain of coding responsive emails with dark mode support and takes care of inconsistencies between Gmail, Outlook, and other email clients.

Getting Started

Git Hooks Setup

Git hooks are managed with mise.

mise must be installed. Run mise install to automatically install bun and other required tools.

mise trust
mise install
mise run setup

mise run setup installs dependencies via bun install, then sets up a commit-msg hook so commitlint runs automatically on each commit.

Components

Vue ports of React Email components.

• Body
• Button
• CodeBlock
• CodeInline
• Column
• Container
• Font
• Head
• Heading
• Hr (Divider)
• Html
• Img (Image)
• Link
• Markdown
• Preview
• Row
• Section
• Tailwind
• Text (Paragraph)

Project Structure

vue-email/
├── vendor/
│   └── react-email/    # React Email source (git submodule)
├── package.json
├── .mise.toml
└── commitlint.config.mjs

Claude Code Setup

1. Run Claude Code in the project directory:

claude

2. Run the setup skill to configure Claude Code for this project:

/claude-code-setup:claude-code-setup

3. Initialize the Please workspace:

/please:setup

4. Set up code review tools:

/review:setup

Documentation

Document	Description
Product Guide	Vision, target users, core features, and constraints
Product Guidelines	API design principles, component design, and code style
Tech Stack	Runtime, frameworks, build tools, and dev commands
Workflow	TDD lifecycle, quality gates, and branch strategy
Tracks Index	Active and completed implementation tracks
Workspace Index	Full directory map of the .please/ workspace

References

• React Email - Original project
• engineering-standards
• claude-code-plugins
• commitlint