Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unlayer/vue-email-editor
Drag-n-Drop Email Editor Component for Vue.js
https://github.com/unlayer/vue-email-editor
builder drag-and-drop email-marketing email-template html-email template vue vue-components vuejs
Last synced: 4 days ago
JSON representation
Drag-n-Drop Email Editor Component for Vue.js
- Host: GitHub
- URL: https://github.com/unlayer/vue-email-editor
- Owner: unlayer
- Created: 2018-11-03T20:13:11.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-26T05:48:58.000Z (3 months ago)
- Last Synced: 2025-01-18T05:02:30.307Z (11 days ago)
- Topics: builder, drag-and-drop, email-marketing, email-template, html-email, template, vue, vue-components, vuejs
- Language: Vue
- Homepage: https://unlayer.com
- Size: 2.02 MB
- Stars: 602
- Watchers: 20
- Forks: 165
- Open Issues: 65
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-opensource-email - Vue Email Editor - Drag-n-Drop Email Editor Component for Vue.js (Editing / Email Builder & Visual Editing Component)
README
# Vue Email Editor
The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Vue](https://vuejs.org/) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.
| Video Overview |
| :-----------------------------------------------------------------------------------------------------------------------------: |
| [](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
| _Watch video overview: https://youtu.be/MIWhX-NF3j8_ |
## Live Demo
Check out the live demo here: https://vue-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/vue-email-editor/tree/master/src))
## Installation
The easiest way to use Vue Email Editor is to install it from Npm or Yarn and include it in your own Vue build process.
```
npm install vue-email-editor --save
```
or
```
yarn add vue-email-editor
```
## Usage
Next, you'll need to import the Email Editor component to your app.
**App.vue**
```html
Vue Email Editor (Demo)
Save Design
Export HTML
import { EmailEditor } from 'vue-email-editor';
export default {
name: 'app',
components: {
EmailEditor,
},
methods: {
// called when the editor is created
editorLoaded() {
console.log('editorLoaded');
// Pass the template JSON here
// this.$refs.emailEditor.editor.loadDesign({});
},
// called when the editor has finished loading
editorReady() {
console.log('editorReady');
},
saveDesign() {
this.$refs.emailEditor.editor.saveDesign((design) => {
console.log('saveDesign', design);
});
},
exportHtml() {
this.$refs.emailEditor.editor.exportHtml((data) => {
console.log('exportHtml', data);
});
},
},
};
```
### Methods
| method | params | description |
| -------------- | ------------------- | ------------------------------------------------------- |
| **loadDesign** | `Object data` | Takes the design JSON and loads it in the editor |
| **saveDesign** | `Function callback` | Returns the design JSON in a callback function |
| **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function |
See the [example source](https://github.com/unlayer/vue-email-editor/tree/master/src) for a reference implementation.
### Properties
- `editorId` `String` HTML div id of the container where the editor will be embedded (optional)
- `minHeight` `String` minimum height to initialize the editor with (default 500px)
- `options` `Object` options passed to the Unlayer editor instance (default {})
- `tools` `Object` configuration for the built-in and custom tools (default {})
- `appearance` `Object` configuration for appearance and theme (default {})
- `projectId` `Integer` Unlayer project ID (optional)
- `locale` `String` translations string (default en-US)
See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.
Here's an example using the above properties...
**App.vue**
```html
Vue Email Editor (Demo)
Save Design
Export HTML
import { EmailEditor } from 'vue-email-editor';
export default {
name: 'app',
components: {
EmailEditor,
},
data() {
return {
minHeight: '1000px',
locale: 'en',
projectId: 0, // replace with your project id
tools: {
// disable image tool
image: {
enabled: false,
},
},
options: {},
appearance: {
theme: 'dark',
panels: {
tools: {
dock: 'right',
},
},
},
};
},
methods: {
// called when the editor is created
editorLoaded() {
console.log('editorLoaded');
// Pass your template JSON here
// this.$refs.emailEditor.editor.loadDesign({});
},
// called when the editor has finished loading
editorReady() {
console.log('editorReady');
},
saveDesign() {
this.$refs.emailEditor.editor.saveDesign((design) => {
console.log('saveDesign', design);
});
},
exportHtml() {
this.$refs.emailEditor.editor.exportHtml((data) => {
console.log('exportHtml', data);
});
},
},
};
```
## Custom Tools
Custom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential. [Learn More](https://docs.unlayer.com/docs/custom-tools)
[](https://docs.unlayer.com/docs/custom-tools)
## Localization
You can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)
### License
Copyright (c) 2024 Unlayer. [MIT](LICENSE) Licensed.