Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@yakoue/vue-email-builder
Advanced tools
Readme
<script src="https://unpkg.com/@yakoue/vue-email-builder"></script>
$ npm install @yakoue/vue-email-builder --save
or
$ yarn @yakoue/vue-email-builder
Next, you'll need to import the Email Builder component to your app.
<template>
<div id="example">
<div class="container">
<div id="bar">
<h1>Vue Email Editor (Demo)</h1>
<button @click="saveDesign">Save Design</button>
<button @click="exportHtml">Export HTML</button>
</div>
<EmailBuilder ref="emailbuilder" :config="config" @load="editorLoaded" />
</div>
</div>
</template>
<script>
import EmailBuilder from '@yakoue/vue-email-builder'
export default {
name: 'Example',
components: {
EmailBuilder,
},
data() {
return {
config: {},
emailTemplate: `<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>
<h1> Hey Title! </h1>
</mj-text>
<mj-button> Hi nestor! </mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>`,
}
},
methods: {
editorLoaded(instance) {
//
this.instance = instance
this.instance.addEvent('onExport', (data) => {
console.log('exportHtml', data)
})
this.instance.setTemplate(emailTemplate)
},
saveTemplate() {
this.addEvent('onSave', (template) => {
console.log('saveTemplate', JSON.stringify(template, null, 2))
})
this.instance.save()
},
exportHtml() {
this.instance.export()
},
},
}
</script>
Method | Param | description |
---|---|---|
setTemplate | template | Take the template and load it to the builder |
saveTemplate | Function callback | Returns the design JSON and HTML in a callback function |
exportHtml | Function callback | Returns the design HTML in a callback function |
template object or string You can set MJML Json on MJML XML as string to this props
config object You can use this props to config and customize the builder
onLoad function callback You can use this to set call back function on builder load
Attribute | Required | |
---|---|---|
brand object | No | This is the Brand Object from Yakoue. You can get it from the Brand settings page. |
locale string | No | This is the locale you want to load the editor in. We have many translations available. |
fusionTags object | No | This is an array of objects. You can pass the merge tags and special links to display in the editor. |
token string | No | String token for authentication. It is required to enable user saved blocks. |
tools object | No | These are the options for tools and custom tools. |
blocks object | No | This is an array of objects. You can pass custom blocks here. |
drows object | No | This is an array of objects. You can pass custom rows (sections) here. |
body object | No | This objects to custom default template settings |
editor object | No | These are some editor options for different functions of the editor. |
fonts object | No | You can pass custom fonts here. |
toolsDefaultValues object | No | You can pass default tools properties here. |
callbacks array | No | Array of callbacks functions |
For any report please write to contact@yakoue.com
FAQs
#Yakoue's MJML Drag & Drop email builder component for vuejs
The npm package @yakoue/vue-email-builder receives a total of 30 weekly downloads. As such, @yakoue/vue-email-builder popularity was classified as not popular.
We found that @yakoue/vue-email-builder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.