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 builder or generator for your app.
Must Read: Drag-n-Drop Subscription Email Editor Component for Angular
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.
// 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
editorIdStringHTML div id of the container where the editor will be embedded (optional)minHeightStringminimum height to initialize the editor with (default 500px)optionsObjectoptions passed to the Unlayer editor instance (default {})toolsObjectconfiguration for the built-in and custom tools (default {})appearanceObjectconfiguration for appearance and theme (default {})projectIdIntegerUnlayer project ID (optional)localeStringtranslations string (default en-US)
Methods
Must Read: Enter Multiple Emails Using One Input Field | multi-emails
| 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 Also –
[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie
A JavaScript Library to Create Input Fields That Accept Multiple Email Addresses | MeiMei
JavaScript Library Stores Form Data in Local Storage | form-storage
See Demo And Download
Official Website(unlayer): Click Here
This superior jQuery/javascript plugin is developed by unlayer. For extra Advanced Usage, please go to the official website.