# @topol.io/editor-vue > Official Vue.js package for Topol Editor. Latest version **0.3.0** (published 2025-11-10) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @topol.io/editor-vue pnpm add @topol.io/editor-vue yarn add @topol.io/editor-vue bun add @topol.io/editor-vue ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.3.0 | | Published | 2025-11-10 | | First published | 2022-01-28 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM | | Dependencies | 1 | | Unpacked size | 13.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Topol.io | | Maintainers | ecomail, tomsq | | Keywords | plugin, editor, email, topol, topol.io, topol-vue, email-vue, email templates | ## Links - npm: https://www.npmjs.com/package/@topol.io/editor-vue - Homepage: https://topol.io - npm.io page: https://npm.io/package/@topol.io/editor-vue ## Dependencies (1) - [@topol.io/editor](https://npm.io/package/@topol.io/editor.md) 0.3.0 ## Alternatives - [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads - [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads - [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads - [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads - [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads ## Recent versions - 0.3.0 (latest) — 2025-11-10 - 2.0.0-alpha.2 (alpha) — 2026-09-16 - 2.0.0-alpha.1 — 2026-09-11 - 1.0.0-alpha.9 — 2026-08-21 - 1.0.0-alpha.8 — 2026-08-20 - 1.0.0-alpha.7 — 2026-08-20 - 1.0.0-alpha.6 — 2026-08-19 - 1.0.0-alpha.5 — 2026-08-18 - 1.0.0-alpha.4 — 2026-04-28 - 1.0.0-alpha.3 — 2026-04-28 - 1.0.0-alpha.2 — 2026-04-28 - 1.0.0-alpha.1 — 2026-02-17 - 1.0.0-alpha.0 — 2026-02-16 - 0.2.1 — 2025-06-02 - 0.2.0 — 2025-02-28 - … 28 more at https://npm.io/package/@topol.io/editor-vue/versions ## README Tailwind CSS --- Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates. # Documentation ## Installation Install Editor from NPM using: ```sh npm install @topol.io/editor-vue //or yarn add @topol.io/editor-vue ``` ## Use in Component In your Vue component import and add the simplest options. For more options see the docs for [TopolOptions configuration](https://docs.topol.io/reference/topol-options.html) ```js import { TopolEditor } from '@topol.io/editor-vue'; const customOptions = { authorize: { apiKey: 'YOUR_API_TOKEN', userId: 'some-user-id', }, }; ``` ```html ``` ## Call Topol Plugin actions To call actions to the editor import: ```js import { TopolPlugin } from '@topol.io/editor-vue'; TopolPlugin.save(); ``` For more TopolPlugin functions refer to the [TopolPlugin actions](https://www.npmjs.com/package/@topol.io/editor#call-topol-plugin-actions)
## Editor Events The callbacks from editor are received as component events. ```html ``` ### List of all editor events | Event | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `@onSave` | Returns object which contains html and json of the template [more info](https://docs.topol.io/guide/callbacks.html#on-save) | | `@onSaveAndClose` | Returns object which contains html and json of the template [more info](https://docs.topol.io/guide/callbacks.html#on-save-and-close) | | `@onTestSend` | Returns object which contains email, html and json of the template [more info](https://docs.topol.io/guide/callbacks.html#on-test-email-send) | | `@onOpenFileManager` | When user clicks file manager open [more info](https://docs.topol.io/guide/custom-filemanager.html#onopenfilemanager) | | `@onLoaded` | After editor template is loaded using `TopolPlugin.load()` [more info](https://docs.topol.io/guide/callbacks.html#on-loaded) | | `@onInit` | When editor inits [more info](https://docs.topol.io/guide/callbacks.html#on-init) | | `@onBlockSave` | When user saves block in editor, returns object of type ISavedBlock [more info](https://docs.topol.io/guide/callbacks.html#on-block-save) | | `@onBlockRemove` | When user removes saved block, returns id of saved block to be removed [more info](https://docs.topol.io/guide/callbacks.html#on-block-remove) | | `@onBlockEdit` | When user edits saved block, returns id of saved block to be updated [more info](https://docs.topol.io/guide/callbacks.html#on-block-edit) | | `@onUndoChange` | When user clicks undo button, retunrs number of steps user undone [more info](https://docs.topol.io/guide/callbacks.html#on-undo-change) | | `@onRedoChange` | When user clicks redo button, retunrs number of steps user redone [more info](https://docs.topol.io/guide/callbacks.html#on-redo-change) | | `@onPreview` | When user switches to preview [more info](https://docs.topol.io/guide/callbacks.html#on-preview) | | `@onAlert` | When alert appears in editor [more info](https://docs.topol.io/guide/callbacks.html#on-alert) | | `@onClose` | When close is click inside WindowBar [more info](https://docs.topol.io/guide/top-bar.html#window-bar) | | `@onEdittedWithoutSaveChanged` | When user is about to leave an editor with unsaved changes [more info](https://docs.topol.io/guide/disable-before-leaving-modal.html#before-exit-modal-when-user-has-unsaved-changes) | | `@onOpenCustomBlockDialog` | When user clicks on the open dialog in custom block [more info](https://docs.topol.io/guide/custom-block.html#inserting-custom-html-in-custom-dialog-component) | | `@onTemplateRename` | When user clicks on the pencil icon next to the template name [more info](https://docs.topol.io/guide/rename-template.html#rename-template) | | `@updateTestingEmailAddresses` | When user edits the email list in preview [more info](https://docs.topol.io/guide/sending-a-test-email.html#managing-saving-emails-yourself) | | `@onError` | When an error that cannot be handled happened in the editor [more info](https://docs.topol.io/guide/callbacks.html#onerror) |
## TypeScript Topol Editor provides full TypeScript integration and exports all necessary types. ```vue ``` --- _Source: https://npm.io/package/@topol.io/editor-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._