How to integrate Polotno editor into Vue application?
Let's demonstrate how to integrate the Polotno editor, a React-based design tool, into an Vue application.
This demo showcases:
Integration of React components (Polotno) within an Vue application
Optional use of MobX for state management in Vue
Installation
Run the following npm command to install React, ReactDOM, and Polotno:
npm install react react-dom polotno
Optionally, you can install mobx-vue-lite library if you want to have automatic reactivity of changes on canvas in your vue components.
npm install mobx-vue-lite
Create Polotno Editor Component With React
Create editor.tsx, and set up the Polotno editor as a React component:
import { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from "polotno";
import { Toolbar } from "polotno/toolbar/toolbar";
import { ZoomButtons } from "polotno/toolbar/zoom-buttons";
import { SidePanel } from "polotno/side-panel";
import { Workspace } from "polotno/canvas/workspace";
import * as React from "react";
import createStore from "polotno/model/store";
import "@blueprintjs/core/lib/css/blueprint.css";
export const store = createStore({ key: "your-api-key", showCredit: true });
store.addPage();
export const App = () => {
return (
<PolotnoContainer style={{ height: "90vh" }}>
<SidePanelWrap>
<SidePanel store={store} />
</SidePanelWrap>
<WorkspaceWrap>
<Toolbar store={store} />
<Workspace store={store} />
<ZoomButtons store={store} />
</WorkspaceWrap>
</PolotnoContainer>
);
};
Remember to replace "your-api-key" in editor.tsx with your actual Polotno API key.
Set Up React Integration
In an Vue component that should show the editor (let's call it App.vue), use React DOM to render the Polotno editor:
<template>
<div id="editor"></div>
</template>
<script setup>
import * as ReactDOM from 'react-dom/client';
import * as React from 'react';
import { App, store } from './components/editor';
import { Observer } from 'mobx-vue-lite';
import { onMounted, onUnmounted } from 'vue';
let root;
onMounted(() => {
root = ReactDOM.createRoot(document.getElementById('editor'));
root.render(React.createElement(App));
});
onUnmounted(() => {
root?.unmount();
});
<
(Optionally) Setup mobx reactions
The mobx-vue-lite library can be used to automatically react to state changes in polotno store. Import it in App.vue:
import { Observer } from 'mobx-vue-lite';
And wrap HTML like this:
<Observer>
<div class="header">
<div>
This header is controlled by Vue. It can be used to display the number
of pages: {{ store.pages.length }}
</div>
<button @click="store.addPage">Add page</button>
</div>
<div id="editor"></div>
</Observer>
Customization
Now from editor.tsx file you can do any customization of the editor you need. From your Vue app, you can control store object. For example, you can use it to load data into editor and export the result into image/pdf.