Skip to main content

DHTMLX Kanban. Vue integration example

This demo shows how to embed DHTMLX Kanban into a Vue 3 application. The Kanban board initializes as a vanilla JavaScript widget inside a Vue component. For a step-by-step setup guide, see the detailed Vue integration guide.

Try it online

View on GitHub. Open the repository and click "Open in Codespaces" on the README page to launch a fully configured Vue app with DHTMLX Kanban in seconds. No local setup required.

The demo creates a Kanban.vue component that receives data through Vue props. Inside mounted, it instantiates the vanilla Kanban class using this.$refs for DOM access, passing columns, cards, swimlane rows, card shape configuration, and a custom editor shape that adds links and comments. A Toolbar is connected to the board through kanban.api. The unmounted hook calls destructor() on both instances.

Solution overview​

  1. Create a custom Kanban.vue component
  2. Use the ref directive to access DOM elements for Kanban and Toolbar containers
  3. In the mounted lifecycle hook, initialize Kanban with the new Kanban(this.$refs.kanban_container, { columns, cards, rows, rowKey, cardShape, editorShape, currentUser }) constructor
  4. Call the new Toolbar(this.$refs.toolbar_container, { api: this.kanban.api }) constructor to create a Toolbar instance and bind it to Kanban
  5. In the unmounted lifecycle hook, call this.kanban.destructor() and this.toolbar.destructor() call destructor() to clean up DOM nodes and event listeners for Kanban and Toolbar

API reference​

Additional resources​