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:
@jsplumb/browser-ui using npm install @jsplumb/browser-ui --save.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'
}
]
<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
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.
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>