https://github.com/bpmn-io/vue-bpmn

Display BPMN 2.0 diagrams in Vue.js
https://github.com/bpmn-io/vue-bpmn

bpmn-js vuejs

Last synced: 6 months ago
JSON representation

Display BPMN 2.0 diagrams in Vue.js

• Host: GitHub
• URL: https://github.com/bpmn-io/vue-bpmn
• Owner: bpmn-io
• License: mit
• Created: 2019-03-26T18:45:31.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-11-07T02:07:22.000Z (12 months ago)
• Last Synced: 2025-04-07T20:08:11.681Z (7 months ago)
• Topics: bpmn-js, vuejs
• Language: HTML
• Homepage:
• Size: 442 KB
• Stars: 252
• Watchers: 14
• Forks: 84
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bpmn-io - vue-bpmn - Render BPMN 2.0 diagrams in a [Vue.js](https://vuejs.org) application (Integrations)

README

          
# vue-bpmn

[![CI](https://github.com/bpmn-io/vue-bpmn/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/vue-bpmn/actions/workflows/CI.yml)

Use [bpmn-js](https://github.com/bpmn-io/bpmn-js) to display BPMN 2.0 diagrams in a [Vue.js](https://vuejs.org) application.

## Usage

```html

  

  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');

      }

    }

  };

```

Note that the diagram will be loaded via ajax from the given `url` and thus must be served by your app.

## Resources

* [Issues](https://github.com/bpmn-io/vue-bpmn/issues)

* [Example](./example)

## License

MIT