{"id":13705326,"url":"https://github.com/unlayer/vue-email-editor","last_synced_at":"2025-05-15T08:08:56.826Z","repository":{"id":40793854,"uuid":"156020094","full_name":"unlayer/vue-email-editor","owner":"unlayer","description":"Drag-n-Drop Email Editor Component for Vue.js","archived":false,"fork":false,"pushed_at":"2025-03-03T07:19:17.000Z","size":824,"stargazers_count":618,"open_issues_count":67,"forks_count":166,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-07T03:14:59.876Z","etag":null,"topics":["builder","drag-and-drop","email-marketing","email-template","html-email","template","vue","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://unlayer.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unlayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-03T20:13:11.000Z","updated_at":"2025-04-02T02:35:41.000Z","dependencies_parsed_at":"2024-07-10T07:34:20.023Z","dependency_job_id":"fbfb331e-6993-4e9e-9fa4-f991d4df8b98","html_url":"https://github.com/unlayer/vue-email-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Fvue-email-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Fvue-email-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Fvue-email-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Fvue-email-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unlayer","download_url":"https://codeload.github.com/unlayer/vue-email-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248889848,"owners_count":21178306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","drag-and-drop","email-marketing","email-template","html-email","template","vue","vue-components","vuejs"],"created_at":"2024-08-02T22:00:37.519Z","updated_at":"2025-04-14T13:41:03.979Z","avatar_url":"https://github.com/unlayer.png","language":"Vue","readme":"# 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\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003cdiv id=\"bar\"\u003e\n        \u003ch1\u003eVue Email Editor (Demo)\u003c/h1\u003e\n\n        \u003cbutton v-on:click=\"saveDesign\"\u003eSave Design\u003c/button\u003e\n        \u003cbutton v-on:click=\"exportHtml\"\u003eExport HTML\u003c/button\u003e\n      \u003c/div\u003e\n\n      \u003cEmailEditor\n        ref=\"emailEditor\"\n        v-on:load=\"editorLoaded\"\n        v-on:ready=\"editorReady\"\n      /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\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) =\u003e {\n          console.log('saveDesign', design);\n        });\n      },\n      exportHtml() {\n        this.$refs.emailEditor.editor.exportHtml((data) =\u003e {\n          console.log('exportHtml', data);\n        });\n      },\n    },\n  };\n\u003c/script\u003e\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\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003cdiv id=\"bar\"\u003e\n        \u003ch1\u003eVue Email Editor (Demo)\u003c/h1\u003e\n\n        \u003cbutton v-on:click=\"saveDesign\"\u003eSave Design\u003c/button\u003e\n        \u003cbutton v-on:click=\"exportHtml\"\u003eExport HTML\u003c/button\u003e\n      \u003c/div\u003e\n\n      \u003cEmailEditor\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      /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\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) =\u003e {\n          console.log('saveDesign', design);\n        });\n      },\n      exportHtml() {\n        this.$refs.emailEditor.editor.exportHtml((data) =\u003e {\n          console.log('exportHtml', data);\n        });\n      },\n    },\n  };\n\u003c/script\u003e\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","funding_links":[],"categories":["Editing","Vue"],"sub_categories":["Email Builder \u0026 Visual Editing Component"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlayer%2Fvue-email-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funlayer%2Fvue-email-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlayer%2Fvue-email-editor/lists"}