Draw2d with VueJS app [SOLVED] about draw2d

[jshor]

I used vue-cli to bootstrap a project with draw2d in it. You need to have jQuery exposed on the window object in your webpack config, and import the jQuery UI droppable plugin.

yarn add jquery jquery-ui draw2d

in vue.config.js (or webpack directly), expose jQuery to the window:

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        'jquery': 'jquery',
        'window.jQuery': 'jquery',
        'jQuery': 'jquery'
      })
    ],
  }
}

in main.js (or whatever endpoint you initialize vue in), import jquery-ui droppable:

import 'jquery-ui/ui/widgets/draggable'
import 'jquery-ui/ui/widgets/droppable'

unfortunately the instantiation of draw2d requires that the droppable plugin is defined, so if you don't plan on using the drag-and-drop feature to create new elements in draw2d, you can just turn them off instead of using/importing jQuery UI:

import $ from 'jquery'

$.fn.draggable = () => {}
$.fn.droppable = () => {}

then you should be able to use draw2d in your vue app like so:

<template>
  <div id="draw2d" />
</template>

<script>
import draw2d from 'draw2d'

export default {
  name: 'Draw2D',
  mounted () {
    const canvas = new draw2d.Canvas('draw2d')
  }
}
</script>

[jshor]

Hi @Samanoova - I didn't notice any performance hits with this solution, but I haven't tested it extensively

[roblambertini]

@jshor Thank you very much, it works!

[Samanoova]

Hi @jshor
thank you for the solution I would ask you!
did you face any problem with performance after this solution?