Skip to main content

Integration with Vue framework.

Polotno is designed to work with React framework. Most of the customization demos on the site are made for a React codebase.

If you want to do any UI customizations, please take a look into Non-React integration guide.

For simpler prototype integration continue to read...

Is it possible to use polotno with Vue.js framework?

Demo: https://codesandbox.io/s/github/polotno-project/polotno-site/tree/source/examples/polotno-and-vue?file=/src/App.vue

If you don't need much customizations you can make your own application with Vue.js framework and embed polotno into it. You can use store API to interact with the editor. Also you can

<template>
<div>
<link
href="https://unpkg.com/@blueprintjs/core@5/lib/css/blueprint.css"
rel="stylesheet"
/>
<div id="app"></div>
</div>
</template>

<script>
import { createDemoApp } from "polotno/polotno-app";

export default {
name: "App",
mounted() {
const { store } = createDemoApp({
container: document.getElementById("app"),
key: "YOUR_API_KEY", // you can create it here: https://polotno.com/cabinet/
// you can hide back-link on a paid license
// but it will be good if you can keep it for Polotno project support
showCredit: true,
});
},
};
</script>

<style global>
#app {
width: 100vw;
height: 100vh;
}
body {
padding: 0;
margin: 0;
}
</style>