npm package: @mcl0122/email-builder-vue
Description: Vue 3 wrapper for EmailBuilder.js
Latest version: 0.1.2

# 📦 @mcl0122/email-builder-vue  
*A zero-config Vue 3 wrapper for EmailBuilder.js*  
Shipped **offline** (no CDN) – just `npm i @mcl0122/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)
- **English interface** - built with English localization
- **2.4MB bundle** - includes complete email builder functionality

---

## 🚀 Quick start

### 1. Install
```bash
npm i @mcl0122/email-builder-vue
```

### 2. Import & use
```vue
<script setup lang="ts">
import { ref } from 'vue'
import EmailBuilder from '@mcl0122/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.

```vue
<!-- pages/index.vue -->
<template>
  <ClientOnly>
    <EmailBuilder v-model="tpl" @update:html="h => html = h" />
  </ClientOnly>
</template>
```

### Programmatic update
```ts
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)

```bash
# 1. Clone
git clone https://github.com/djabdou50/email-builder-vue.git
cd email-builder-vue

# 2. Install deps
npm i

# 3. Build the package
npm run build

# 4. Publish to npm (after version bump)
npm version patch  # or minor/major
npm publish --access public
```

### Updating EmailBuilder.js
To update the underlying EmailBuilder.js with newer versions:

```bash
# 1. Clone the source repository
git clone https://github.com/usewaypoint/email-builder-js.git
cd email-builder-js

# 2. Install dependencies
npm install

# 3. Build the editor sample
cd packages/editor-sample
npm run build

# 4. Copy the built file to your Vue wrapper
cp dist/assets/*.js ../../email-builder-vue/src/assets/email-builder.min.js
```

Project layout
```
email-builder-vue
├─ src
│  ├─ EmailBuilder.vue   # Vue 3 wrapper component
│  ├─ loader.ts          # Dynamic script loader
│  ├─ index.ts          # Main export
│  └─ assets
│     └─ email-builder.min.js   # EmailBuilder.js bundle (English)
├─ email-builder-js/    # Source repository (for updates)
└─ README-BUILD.txt     # Detailed build instructions
```

---

## ⚠️ Important Notes

- **Package Size**: The bundle is ~2.4MB due to the complete EmailBuilder.js functionality
- **SSR Compatibility**: The component automatically detects server-side rendering and loads only on client-side
- **Browser Support**: Modern browsers supporting ES2018+ features
- **Vue Version**: Requires Vue 3.2.0 or higher

## 📦 Package Information

- **Current Version**: 0.0.6
- **Published on**: NPM as @mcl0122/email-builder-vue
- **Bundle Format**: ES modules + UMD
- **TypeScript**: Full type definitions included

## 📄 License
MIT © 2025