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.
npm install @tofandel/vue-unlayerThe excellent drag-n-drop email editor by Unlayer as a Vue _wrapper
component_. This is the most powerful and developer friendly visual email builder for your app.
| Video Overview |
| :-----------------------------------------------------------------------------------------------------------------------------: |
|  |
| _Watch video
overview: https://youtu.be/MIWhX-NF3j8_ |
Check out the live demo here: https:
https://vue-email-editor-demo.netlify.app/ (Source Code)
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 @tofandel/vue-unlayer --save
or
`
yarn add @tofandel/vue-unlayer
Next, you'll need to import the Email Editor component to your app.
App.vue
`vue
Vue Email Editor (Demo)
@click="saveDesign"
>
Save Design
@click="exportHtml"
>
Export HTML
@load="editorLoaded"
@ready="editorReady"
/>
`
| method | params | description |
| -------------- | ------------------- | ------------------------------------------------------- |
| loadDesign | Object data | Takes the design JSON and loads it in the editor |Function callback
| saveDesign | | Returns the design JSON in a callback function |Function callback
| exportHtml | | Returns the design HTML and JSON in a callback function |
See the example source for a reference
implementation.
- 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 for all available options.
Here's an example using the above properties...
App.vue
`html
Vue Email Editor (Demo)
:appearance="appearance"
:min-height="minHeight"
:project-id="projectId"
:locale="locale"
:tools="tools"
:options="options"
@load="editorLoaded"
@ready="editorReady"
/>
``
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
You can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations.
Translations managed by PhraseApp
Copyright (c) 2021 Unlayer. MIT Licensed.