📦 email-builder-vue

A zero-config Vue 3 wrapper for EmailBuilder.js
Shipped offline (no CDN) – just npm i email-builder-vue.

---

✨ Features

- Works in any Vue 3 project (Vite, Nuxt, Vue CLI, etc.)
- Offline – the minified EmailBuilder.js is bundled inside
- v-model reactive JSON ↔ HTML
- TypeScript declarations included
- Tree-shakable & SSR-friendly (auto-switches to client-only)

---

🚀 Quick start

$3

``bash
npm i email-builder-vue
`

$3

`vue


`

---

📖 API

| Prop | Type | Default | Description |
|-----------------|-----------|---------|-------------|
| modelValue | object | — | Reactive JSON that EmailBuilder reads/writes. |
| @update:html | event | — | Fires whenever the generated HTML changes. Payload: string |
| @update:modelValue | event | — | Fires when internal JSON changes (two-way via v-model). |

---

🛠️ Advanced usage

$3

The component auto-detects server-side rendering and skips loading the script on the server.

`vue


`

$3


`ts
template.value.root.data.canvasColor = '#000000'
// EmailBuilder re-renders automatically
`

$3

Each instance gets a unique id so the underlying script never collides.

---

🧪 Development (contributors)

`bash


1. Clone

git clone https://github.com/djabdou50/email-builder-vue.git
cd email-builder-vue

2. Install deps

npm i

3. Dev build (watch mode)

npm run dev

4. Run example

cd example-vite
npm i
npm run dev
`

Project layout
`
email-builder-vue
├─ src
│ ├─ EmailBuilder.vue # wrapper component
│ ├─ loader.ts # local script loader
│ └─ assets
│ └─ email-builder.min.js # bundled 3rd-party file
└─ example-vite # tiny playground (gitignored)
``

---

📄 License

MIT © 2025 Abdeltif bouziane

---

Found a bug or need React support?
Open an issue or PR!