Vue Email Editor is an excellent drag-and-drop email editor by Unlayer as a Vue cover component. This is the most powerful and developer-friendly visual email generator for your app.
free email template builder, email template builder open source, best email template builder, html email template builder free, unlayer github, email template builder javascript
How to make use of it:
Install and download:
# Yarn $ yarn add vue-email-editor # NPM $ npm i vue-email-editor
1. Import and register the email editor.
import { EmailEditor } from 'vue-email-editor' export default { components: { EmailEditor }, }
2. Add the mail editor to your application template.
<EmailEditor ref="emailEditor" v-on:load="editorLoaded" /> <button v-on:click="saveDesign">Save Design</button> <button v-on:click="exportHtml">Export HTML</button>
export default { name: 'app', components: { EmailEditor }, methods: { editorLoaded() { this.$refs.emailEditor.editor.loadDesign({}); }, saveDesign() { this.$refs.emailEditor.editor.saveDesign( (design) => { console.log('saveDesign', design); } ) }, exportHtml() { this.$refs.emailEditor.editor.exportHtml( (data) => { console.log('exportHtml', data); } ) } } }
3. Possible options and props. See https://unlayer.com/ for full configurations.
// options passed to the Unlayer editor instance options: Object, // project ID projectId: Number, // configuration for the built-in and custom tools tools: Object, // configuration for appearance and theme appearance: Object, // translations string locale: String, // min height minHeight: { type: String, default: '500px', },
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)
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 |
Draggable Unlayer Email Editor With Vue, Vue Email Editor Plugin/Github, vue email template, vue drag and drop editor, email builder plugin, vue html email, vue js editor
See Demo And Download
Official Website(unlayer): Click Here
This superior jQuery/javascript plugin is developed by unlayer. For extra Advanced Usages, please go to the official website.
Be First to Comment