Home > @jsplumbtoolkit/browser-ui-vue3

browser-ui-vue3 package

Provides integration with Vue 3.

Classes

Class	Description
BrowserUIVue3	Toolkit instance for use with Vue3 integration.

Functions

Function	Description
bindToDevLifecycle(event, handler)
loadSurface(surfaceId, callback)	Loads the Surface with the given ID.
newInstance(options)	Create a new instance of the Toolkit to use with the Vue 3 integration.

Interfaces

Interface	Description
Vue3RenderOptions

Variables

Variable	Description
BaseGroupComponent	Provides a mixin you should use to create a component that renders a group. Usage:

Vue.component('MyGroup', {
 props:{ ... },
 mixins:[ jsPlumbToolkitVue3.BaseGroupComponent],
 template:'...your node template.......',
 methods:{
     ...
 }
})

| | BaseNodeComponent |

Provides a mixin you should use to create a component that renders a node.

Usage:

Vue.component('MyNode', {
 props:{ ... },
 mixins:[ jsPlumbToolkitVue3.BaseNodeComponent],
 template:'...your node template.......',
 methods:{
     ...
 }
})

| | COMPONENT_MINIVIEW | | | COMPONENT_TOOLKIT | | | EVENT_VERTEX_UPDATED | | | EVENT_VERTICES_RENDERED | | | JsPlumbToolkitVue3Plugin |

The Toolkit's Vue3 integration plugin. To use this you need to first import it, and then use it:

import { JsPlumbToolkitVue3Plugin } from '@jsplumbtoolkit/browser-ui-vue3'
Vue.use(JsPlumbToolkitVue3Plugin)

| | Palette |

Provides a mixin you can use to create a component that controls a set of droppable nodes for a Surface.

Usage:

Vue.component('my-palette', {
 props:[ "nodeTypes" ],
 mixins:[ jsPlumbToolkitVue3.Palette ],
 selector:'[data-type]',
 template:'<ul><li v-for="node in nodeTypes" :data-type="type">{{label}}</li></ul>',
 methods:{
     typeExtractor: function (el) {
         return el.getAttribute("jtk-node-type");
     },
     dataGenerator: function (type) {
         return { w:120, h:80 };
     }
 }
})

| | PROP_CLASS_NAME | | | PROP_DATA | | | PROP_ID | | | PROP_RENDER_PARAMS | | | PROP_SURFACE_ID | | | PROP_TOOLKIT_PARAMS | | | PROP_URL | | | PROP_VIEW | |