Estoy tratando de integrar la edición comunitaria @jsplumb/browser-ui en mi aplicación. Según la recomendación del equipo de jsplumb , estoy usando @jsplumb/browser-ui pero no entiendo cómo comenzar a integrarlo en mi Vue/Nuxtjs application .
Los siguientes son los pasos que estoy siguiendo:
@jsplumb/browser-ui usando npm install @jsplumb/browser-ui --save .nuxt-config.js como parte del 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> No entiendo cómo integrarlo dentro de mi aplicación. La documentación no proporciona un ejemplo completo con respecto a Vue/Nuxtjs
El uso de importaciones dinámicas como se muestra en esta respuesta anterior y la importación del paquete jsplumb solo en un contexto de navegador resolvió el problema que enfrentaba OP.
Además de usar $refs para la selección de DOM.
Lo siguiente funcionó para mí basado en los comentarios de @kissu:
<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>