A powerful and developer-friendly email editor that makes it easy to create professional newsletters with drag and drop.
How to use it:
1. Import and register the email editor.
import { EmailEditor } from 'vue-email-editor' export default { components: { EmailEditor }, }
2. Add the mail editor to your app 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 & props. See https://unlayer.com/ for full configs.
// 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', },
Preview:
Changelog:
v1.0.0 (04/22/2022)
- Update
Download Details:
Author: unlayer
Live Demo: https://vue-email-editor-demo.netlify.app/
Download Link: https://github.com/unlayer/vue-email-editor/archive/master.zip
Official Website: https://github.com/unlayer/vue-email-editor
Install & Download:
# Yarn
$ yarn add vue-email-editor
# NPM
$ npm i vue-email-editor