Bpmn io vue 3 integration


Im currently trying to embed bpmn io in a vue 3 application. Im able to load the diagram using the raw loader in webpack. Unfortunately there are some other issues.

  1. The side bar on the left is not appearing
  2. The canvas.zoom is not working. Diagram occupies only a small portion of the screen width and height.

MainPage.vue(file where bpmn magic resides)

  <div ref="container" id="canvas" style="height: 100%"/>

import pizzaDiagram from '../assets/pizza-diagram.bpmn';

export default {
  name: 'main-page',
  mounted() {
    this.$nextTick(() => {
      const container = this.$refs.container;
      let modeler = this.$bpmnModeler;

      modeler.options = {
        height: "100%",
        width: "100%"

      modeler.importXML(pizzaDiagram).then((result) => {
        const {warnings} = result;
        console.log('success !', warnings);
        const canvas = modeler.get('canvas');
      }).catch((err) => {
        const {warnings, message} = err;

        console.trace('something went wrong. what went wrong :', warnings, message)

  data() {
    return {}

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  height: 100%;
  width: 100%;

main.js(file where i register my bpmn components for general use app-wide)

import { createApp } from 'vue'
import App from './App.vue'
import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js'
import BpmnModeler from "bpmn-js";
import BpmnViewer from "bpmn-js";

const app = createApp(App);
app.config.globalProperties.$bpmnViewer = new BpmnViewer();
app.config.globalProperties.$bpmnModeler = new BpmnModeler();
app.config.globalProperties.$bpmnInstance = new BpmnJS();


thanks for the help in advance

Hi @Blitz_Mee, welcome to our forum!

I assume you base your app on vue-bpmn?

The side bar on the left is not appearing

What do you consider the sidebar? Could you show a screenshot how the renderer looks like versus how you expect it to look like?

The canvas.zoom is not working. Diagram occupies only a small portion of the screen width and height.

This is likely an issue with the styling. Make sure the container the BPMN viewer embeds is actually full size. It does not automatically expand with the contents of the diagram.


Hi thankyou so much.

yes i did take some ideas form vue-bpmn.

Using vue 3 however I found that using ref for my template element, and passing it to canvas was the problem that didnt load the options sidebar containing the different tools for diagram management.

so instead i simply used document.getElementById(“myid”) instead of this.$refs.myref and added it to canvas options. This solved the problem. Just to reiterate for the next person, i was using vue 3.

This does not sound like the cleanest solution. I’m glad though it works for you!

what alternative would you rather suggest?