bpmn-io / vue-bpmn

Display BPMN 2.0 diagrams in Vue.js

vue-bpmn

Use bpmn-js to display BPMN 2.0 diagrams in a Vue.js application.

Usage

<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.

Resources

• Issues
• Example

License

MIT

vue-bpmn's Issues

bpmn-navigated-viewer.production.min.js

Can't resolve 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js'

Add support for Nuxt

Describe the Bug

During import of vue-bpmn the application crashes. Is the package also compatible with nuxt?

Environment

• Node v14.17.5
• Windows 10
• nuxt v2.15.8 (latest version)
• bpmn-js
  -> Tried v8.72 (latest version)
  -> And v3.2.3 (example version)

Example not works as expected

Hi,

I tried to run example project using the npm install and npm start command consecutively, however got an error:

This dependency was not found:

* bpmn-js/dist/bpmn-navigated-viewer.production.min.js in ./node_modules/vue-bpmn/dist/index.esm.js

To install it, you can run: npm install --save bpmn-js/dist/bpmn-navigated-viewer.production.min.js

How could I fix that error?

Update to Vue 3

bpmn current adaptation version is vue 2.6
recommended to upgrade to vue 3.x

Add properties panel component

Describe the solution you'd like

Offer an additional vue component which extends the current vue-bpmn with a bpmn-js-properties-panel.

Original Question

is it possible to develop an app like the example
https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel
with vue-bpmn

extend to xml variable

hi

A nice feature would be to pass directly the xml as input instead of a file.
As a newbie , I ve try to do this by creating a component inspired from your code in my vue app

<template>
  <div ref="container" class="vue-bpmn-diagram-container"></div>
</template>

<script>
  import BpmnJS from 'bpmn-js';

  export default {
    name: 'bpmn-display',
    props: {
      xml: {
        type: String
      }
    },
    data: function () {
      return {
        diagramXML: null
      };
    },
    mounted: function () {
      var container = this.$refs.container;

      var self = this;

      this.bpmnViewer = new BpmnJS({
        container: container
      });

      this.bpmnViewer.on('import.done', function (event) {
        var error = event.error;
        var warnings = event.warnings;

        if (error) {
          self.$emit('error', error);
        } else {
          self.$emit('shown', warnings);
        }

         self.bpmnViewer.get('canvas').zoom('fit-viewport');

      });

      if (this.xml) {
        this.diagramXML = this.xml;
      }
    },
    beforeDestroy: function () {
      this.bpmnViewer.destroy();
    },
    watch: {
      xml: function (val) {
        this.$emit('loading');
        this.diagramXML = this.xml;
      },
      diagramXML: function (val) {
        this.bpmnViewer.importXML(val);
      }
    },
    methods: {
    }
  };
</script>

<style scoped>
  .vue-bpmn-diagram-container {
    height: 100%;
    width: 100%;
  }
</style>

I used like this

<div   class="diagram-container">
  <h5 class="h3 mb-0">Etapes du diagnostic</h5>
  <bpmn-display
    v-bind:xml="bpmn20Xml"
    v-on:error="handleError"
    v-on:shown="handleShown"
  ></bpmn-display>
</div>_

The diagramm i well displayed but I can’t get the movable and zoomable feature . Do you have any idea why ?

Example in the readme doesn't match the example in the repo

I wanted to use the example code in a vue.js cli project. So I copied the vue component which can be found in the readme of this repo. This leads me to a parsing error of the bpmn diagram file. The BPMN container is shown, but not the diagram.
In the example code lies a simple index.html and not a *.vue file, which would fit the readme. The example code itself works as expected, but I can't reproduce it with a *.vue component

Steps to Reproduce

1. create a new vue.js cli project
2. edit the package.json and install the dependencies for bpmn-io
3. replace the app.vue content with the example provided in the readme

Expected Behavior

The diagram should be loaded

Environment

• Host Firefox
• OS: windows 10
• Library version: 3.2.3