3

I am trying to integrate the @jsplumb/browser-ui community edition into my application. As per the recommendation from jsplumb team, I am using the @jsplumb/browser-ui but I am not understanding how to start integrating it into my Vue/Nuxtjs application.

Following are the steps I am following:

  1. Install the @jsplumb/browser-ui using npm install @jsplumb/browser-ui --save.
  2. Include the libraries in the nuxt-config.js as part of script:
script: [
      {
        src:"node_modules/@jsplumb/core/js/jsplumb.core.umd.js",
        mode: 'client'
      },
      {
        src:"node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js",
        mode: 'client'
      }
    ]
  1. I have the code as follows:
<template>
  <div class="row">
    <div class="col-md-12">
      <div id="diagram" style="position: relative" />
    </div>
  </div>
</template>

<script>
if (process.browser) {
  const jsPlumbBrowserUI = require('node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js')
  const instance = jsPlumbBrowserUI.newInstance({
    container: document.getElementById('diagram')
  })
  console.log(instance)
}

export default {
  mounted () {
    if (process.browser) {
      console.log('MOUNTED BLOCK')
    }
  }
}
</script>

I am not understanding how to integrate it within my application. The documentation does not provide a complete example with regards to Vue/Nuxtjs

kissu
  • 40,416
  • 14
  • 65
  • 133
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
  • Since we're in a modern browser context, I do recommend only imports and use a plugin or a local dynamic import: https://stackoverflow.com/a/67825061/8816585 On top of that, I'm not even sure that you can make a script from node_modules but this is probably not the way to go, especially if you only need it locally. – kissu Nov 03 '21 at 09:53
  • I've removed the [tag:node.js] since it's not related to node in any way. – kissu Nov 03 '21 at 09:53
  • Also, don't use querySelectors but rather a `$ref` and in `mounted` to await for the DOM being mounted properly. You could even use `$nextTick` if it does not work accordingly. https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements – kissu Nov 03 '21 at 09:55
  • Also, you may look into injecting your script from a plugin since it's still the way of doing things for scripts that are not plugged to the Vue ecosystem: https://stackoverflow.com/a/68485267/8816585 – kissu Nov 03 '21 at 09:59
  • @kissu Thanks a lot for your response. I was able to make it work based on your first comment. Thanks a lot for it. – BATMAN_2008 Nov 03 '21 at 10:03

2 Answers2

2

Using dynamic imports as shown in this previous answer and importing the jsplumb package only in a browser context solved the issue that OP faced.

On top of using $refs for the DOM selection.

tony19
  • 125,647
  • 18
  • 229
  • 307
kissu
  • 40,416
  • 14
  • 65
  • 133
1

Following worked for me based on @kissu comments:

<template>
  <div class="row">
    <div class="col-md-12">
      <div id="diagram" ref="diagram" style="position: relative" />
    </div>
  </div>
</template>

<script>
export default {
  async mounted () {
    if (process.browser) {
      const jsPlumbBrowserUI = await import('@jsplumb/browser-ui')

      const instance = jsPlumbBrowserUI.newInstance({
        container: this.$refs.diagram
      })
      console.log(instance)
    }
  }
}
</script>
kissu
  • 40,416
  • 14
  • 65
  • 133
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98