Unlayer editor is also available as a Vue.js component.
Installation
The easiest way to use it is to install it from npm and include it in your own Vue build process.
Npm
npm install vue-email-editor --save
Yarn
yarn add vue-email-editor
Usage
Next, you'll need to import the Email Editor component to your app.
App.vue
<template>
<div id="app">
<div class="container">
<div id="bar">
<h1>Vue Email Editor (Demo)</h1>
<button v-on:click="saveDesign">Save Design</button>
<button v-on:click="exportHtml">Export HTML</button>
</div>
<EmailEditor ref="emailEditor" v-on:load="editorLoaded" />
</div>
</div>
</template>
<script>
import { EmailEditor } from 'vue-email-editor'
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);
}
)
}
}
}
</script>
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 for a reference implementation.
Properties
| Name | Type | Description | Default Value |
|---|---|---|---|
| minHeight | String | Minimum height to initialize the editor with | 500px |
| options | Object | Options passed to the Unlayer editor instance | {} |
| tools | Object | Configuration for the built-in and custom tools | {} |
| appearance | Object | Configuration for appearance and theme | {} |
| locale | String | Translations locale | en-US |
| projectId | Integer | Unlayer project ID (optional) |
Example
See the example source for a reference implementation.
Updated about a month ago