Use bpmn-js to display BPMN 2.0 diagrams in a Vue.js application.
<template> <vue-bpmn url="/public/diagram.bpmn" :options="options" v-on:error="handleError" v-on:shown="handleShown" v-on:loading="handleLoading" ></vue-bpmn> </template> <script> import VueBpmn from 'vue-bpmn'; export default { components: { VueBpmn }, data() { return { options: { propertiesPanel: {}, additionalModules: [], moddleExtensions: [] } } }, methods: { handleError: function(err) { console.error('failed to show diagram', err); }, handleShown: function() { console.log('diagram shown'); }, handleLoading: function() { console.log('diagram loading'); } } }; </script>Note that the diagram will be loaded via ajax from the given url and thus must be served by your app.
MIT