📦 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

1. Install

npm i email-builder-vue

2. Import & use

<script setup lang="ts">
import { ref } from 'vue'
import EmailBuilder from 'email-builder-vue'

// Reactive JSON state
const template = ref({
  root: {
    type: 'EmailLayout',
    data: {
      backdropColor: '#F5F5F5',
      canvasColor: '#FFFFFF',
      textColor: '#262626',
      fontFamily: 'MODERN_SANS',
      childrenIds: ['hero']
    }
  },
  hero: {
    type: 'Text',
    data: {
      style: { fontWeight: 'bold', padding: { top: 16, bottom: 16, left: 24, right: 24 } },
      props: { text: 'Hello from Vue!' }
    }
  }
})

const html = ref('')
</script>

<template>
  <EmailBuilder v-model="template" @update:html="h => html = h" />
  <pre>{{ html }}</pre>
</template>

📖 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

Nuxt 3

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

<!-- pages/index.vue -->
<template>
  <ClientOnly>
    <EmailBuilder v-model="tpl" @update:html="h => html = h" />
  </ClientOnly>
</template>

Programmatic update

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

Multiple instances

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

🧪 Development (contributors)

# 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!