{"repo":"unlayer/vue-email-editor","free":true,"listed":false,"github":"https://github.com/unlayer/vue-email-editor","clone":"git clone https://github.com/unlayer/vue-email-editor.git","description":"Drag-n-Drop Email Editor Component for Vue.js","language":"Vue","stars":665,"topics":["builder","drag-and-drop","email-marketing","email-template","html-email","template","vue","vue-components","vuejs"],"license":null,"category":"saas_starter","readme_excerpt":"# Vue Email Editor\n\nThe 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.\n\n|                                                         Video Overview                                                          |\n| :-----------------------------------------------------------------------------------------------------------------------------: |\n| [![Vue Email Editor](https://unroll-assets.s3.amazonaws.com/unlayervideotour.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |\n|                                      _Watch video overview: https://youtu.be/MIWhX-NF3j8_                                       |\n\n## Live Demo\n\nCheck out the live demo here: https://vue-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/vue-email-editor/tree/master/src))\n\n## Installation\n\nThe easiest way to use Vue Email Editor is to install it from Npm or Yarn and include it in your own Vue build process.\n\n```\nnpm install vue-email-editor --save\n```\n\nor\n\n```\nyarn add vue-email-editor\n```\n\n## Usage\n\nNext, you'll need to import the Email Editor component to your app.\n\n**App.vue**\n\n```html\n<template>\n  <div id=\"app\">\n    <div class=\"container\">\n      <div id=\"bar\">\n        <h1>Vue Email Editor (Demo)</h1>\n\n        <button v-on:click=\"saveDesign\">Save Design</button>\n        <button v-on:click=\"exportHtml\">Export HTML</button>\n      </div>\n\n      <EmailEditor\n        ref=\"emailEditor\"\n        v-on:load=\"editorLoaded\"\n        v-on:ready=\"editorReady\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n  import { EmailEditor } from 'vue-email-editor';\n\n  export default {\n    name: 'app',\n    components: {\n      EmailEditor,\n    },\n    methods: {\n      // called when the editor is created\n      editorLoaded() {\n        console.log('editorLoaded');\n        // Pass the template JSON here\n        // this.$refs.emailEditor.editor.loadDesign({});\n      },\n      // called when the editor has finished loading\n      editorReady() {\n        console.log('editorReady');\n      },\n      saveDesign() {\n        this.$refs.emailEditor.editor.saveDesign((design) => {\n          console.log('saveDesign', design);\n        });\n      },\n      exportHtml() {\n        this.$refs.emailEditor.editor.exportHtml((data) => {\n          console.log('exportHtml', data);\n        });\n      },\n    },\n  };\n</script>\n```\n\n### Methods\n\n| method         | params              | description                                             |\n| -------------- | ------------------- | ------------------------------------------------------- |\n| **loadDesign** | `Object data`       | Takes the design JSON and loads it in the editor        |\n| **saveDesign** | `Function callback` | Returns the design JSON in a callback function          |\n| **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function |\n\nSee the [example source](https://github.com/unlayer/vue-email-editor/tree/master/src) for a reference implementation.\n\n### Properties\n\n- `editorId` `String` HTML div id of the container where the editor will be embedded (optional)\n- `minHeight` `String` minimum height to initialize the editor with (default 500px)\n- `options` `Object` options passed to the Unlayer editor instance (default {})\n- `tools` `Object` configuration for the built-in and custom tools (default {})\n- `appearance` `Object` configuration for appearance and theme (default {})\n- `projectId` `Integer` Unlayer project ID (optional)\n- `locale` `String` translations string (default en-US)\n\nSee the [Unlayer Docs](https://docs.unlayer.com/) for all available options.\n\nHere's an example using the above properties...\n\n**App.vue**\n\n```html\n<template>\n  <div id=\"app\">\n    <div class=\"container\">\n      <div id=\"bar\">\n        <h1>Vue Email Editor (Demo)</h1>\n\n        <button v-on:click=\"saveDesign\">Save Design</button>\n        <button v-on:click=\"exportHtml\">Export HTML</button>\n      </div>\n\n      <EmailEditor\n        :appearance=\"appearance\"\n        :min-height=\"minHeight\"\n        :project-id=\"projectId\"\n        :locale=\"locale\"\n        :tools=\"tools\"\n        :options=\"options\"\n        ref=\"emailEditor\"\n        v-on:load=\"editorLoaded\"\n        v-on:ready=\"editorReady\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n  import { EmailEditor } from 'vue-email-editor';\n\n  export default {\n    name: 'app',\n    components: {\n      EmailEditor,\n    },\n    data() {\n      return {\n        minHeight: '1000px',\n        locale: 'en',\n        projectId: 0, // replace with your project id\n        tools: {\n          // disable image tool\n          image: {\n            enabled: false,\n          },\n        },\n        options: {},\n        appearance: {\n          theme: 'dark',\n          panels: {\n            tools: {\n              dock: 'right',\n            },\n          },\n        },\n      };\n    },\n    methods: {\n      // called when the editor is created\n      editorLoaded() {\n        console.log('editorLoaded');\n        // Pass your template JSON here\n        // this.$refs.emailEditor.editor.loadDesign({});\n      },\n      // called when the editor has finished loading\n      editorReady() {\n        console.log('editorReady');\n      },\n      saveDesign() {\n        this.$refs.emailEditor.editor.saveDesign((design) => {\n          console.log('saveDesign', design);\n        });\n      },\n      exportHtml() {\n        this.$refs.emailEditor.editor.exportHtml((data) => {\n          console.log('exportHtml', data);\n        });\n      },\n    },\n  };\n</script>\n```\n\n## Custom Tools\n\nCustom 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](https://docs.unlayer.com/docs/custom-tools)\n\n[![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/docs/custom-tools)\n\n## Localization\n\nYou can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)\n\n### License\n\nCopyright (c) 2024 Unlayer. [MIT](LICENSE) Licensed.\n","default_branch":"master","files":22,"tree":[".gitignore",".nvmrc","README.md","babel.config.js","package-lock.json","package.json","prettier.config.js","public/_redirects","public/favicon.ico","public/index.html","src/assets/logo.png","src/components/EmailEditor.vue","src/components/loadScript.ts","src/components/types.ts","src/data/sample.json","src/main.ts","src/shims-vue.d.ts","src/views/Example.vue","src/vue-email-editor.ts","tsconfig.json","vite.config.ts","vue.config.js"],"storefront":"/r/unlayer","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/unlayer/vue-email-editor/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}