Vue Component
This guide explains how to embed the Unlayer Builder inside a Vue application using the vue-email-editor package.
Installation
Install the vue-email-editor package using npm:
npm install vue-email-editor
Using yarn:
yarn add vue-email-editor
This package works only on the client-side. Make sure the component is not rendered on the server.
Usage
To embed the builder in your Vue app:
1. Create a Client-Only Component
Create a new component file named UnlayerEditor.client.vue inside your components/ directory
2. Add the Unlayer Vue Component
Define the template Block.
<template>
<div class="unlayer-editor">
<EmailEditor
ref="emailEditor"
:options="options"
@load="onLoad"
/>
</div>
</template>
Import the Email Editor Component in setup script and pass the unlayer configurations in the options.
Within your Vue component, embed the <EmailEditor /> component and pass the required configuration using the options prop. This configuration controls how the Unlayer builder is initialized, including the projectId, displayMode, enabled features, user context, and merge tags.
The editor instance is accessed using a ref, allowing you to call methods such as saveDesign, exportHtml, or loadDesign after the editor has loaded. The @load event ensures that the editor is fully initialized before interacting with it.
<script setup>
import { ref } from 'vue'
import { EmailEditor } from 'vue-email-editor'
const emailEditor = ref(null)
const options = {
projectId: 12345,
displayMode: 'email',
version: 'latest'
}
const onLoad = () => {
console.log('Editor loaded')
}
</script>
3. Import and Use the Editor
In your App.vue file, import the UnlayerEditor:
<template>
<UnlayerEditor />
</template>
<script setup>
import UnlayerEditor from "./components/UnlayerEditor.vue";
</script>
Once embedded, the builder will load within your app and reflect the configuration specified via the options prop.