Integrate bpmn-js with vue 3 composition api model

Developers General
1

Greetings

I’m currently used composition api model in vue, but I don’t want use vue integrated sample.
If you’ve problem with integrate bpmn-js and composition api in vue 3, you can use this sample code:
1- install bpmn-js
npm install bpmn-js

2- use

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
// a=> import modeler with any name from modeler not production js file
import BpmnModeler from 'bpmn-js/lib/Modeler';
// b=> import css
import 'bpmn-js/dist/assets/bpmn-js.css';
import 'bpmn-js/dist/assets/diagram-js.css';
// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'; [optional]
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; [optional]

// c=> create ref for modeler container, you can use untyped ref or ref<HTMLDivElement | null | undefined>
const modeler_container = ref<HTMLDivElement>();

// d=> also, create ref for modeler instance, you can use untyped ref or ref<BpmnModeler | null | undefined>
const modeler_instance = ref<BpmnModeler>();

// e=> in onmounted create modeler instance and set container
onMounted(() => {
    modeler_instance.value = new BpmnModeler({
        container: modeler_container.value,
        keyboard: {
            bindTo: window
        }
    });

    modeler_instance.value.createDiagram();
})

onBeforeUnmount(() => {
    modeler_instance.value?.destroy();
});

</script>

<template>
    <div class="vw-100 vh-100" ref="modeler_container"></div>
</template>

image

sorry for bad english :wink:

Good luck.