Registry / productivity / rete-vue-render-plugin

rete-vue-render-plugin

library0.5.2jsnpmunverified

Rete.js plugin for rendering node editors using Vue.js 2.x or 3.x components. Version 0.5.2 is current, with maintenance-level updates based on GitHub activity (last release Oct 2023). Differs from alternatives by tight integration with Rete.js visual programming framework, offering Vue template-based node customization, reactive updates, and slot support. Not compatible with Vue 3 without specific configuration; requires matching major version of Rete.js (e.g., rete@1.x).

productivity

npm install rete-vue-render-plugin

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RETE-VUE-RENDER-PL

rete-vue-render-plugin

productivityjavascriptv0.5.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueRenderPlugin

✓ import { VueRenderPlugin } from 'rete-vue-render-plugin'

✗ const VueRenderPlugin = require('rete-vue-render-plugin')

ESM-only; CJS require will fail. Supports TypeScript via shipped types.

DefaultVuePlugin

✓ import { DefaultVuePlugin } from 'rete-vue-render-plugin'

✗ import DefaultVuePlugin from 'rete-vue-render-plugin'

Named export, not default. Starting v0.5, renamed from older 'VuePlugin'.

Initializes Rete editor with Vue render plugin and registers a numeric node component (Vue 2).

import { NodeEditor } from 'rete'; import { VueRenderPlugin } from 'rete-vue-render-plugin'; import Vue from 'vue'; const editor = new NodeEditor('demo@1.0.0', '#app'); // Register Vue instance (Vue 2) const vueApp = new Vue({ render: h => h('div') }).$mount('#app'); editor.use(VueRenderPlugin, { vue: vueApp }); // Or dynamic mounting (see docs for Vue 3) // Create minimal node import { NumComponent } from 'rete-vue-render-plugin'; editor.register(new NumComponent('num', { label: 'Number' })); editor.on('componentregister', component => { component.editor = editor; }); // Add node editor.addNode({ component: 'num', inputs: {}, outputs: {}, position: [100, 200] });

Debug

Known issues

breakingVersion 0.5.0 broke compatibility with Vue 2.x default exports; requires passing explicit Vue instance.

fix

Pass vue option with mounted Vue app instance (Vue 2) or createApp (Vue 3).

affects: >=0.5.0

gotchaPlugin assumes Vue is already mounted; dynamic mounting within plugin can cause lifecycle issues.

fix

Mount Vue app before passing to plugin; use createApp for Vue 3.

affects: all

deprecatedVuePlugin export renamed to VueRenderPlugin in v0.5.0; old name still present but deprecated.

fix

Use VueRenderPlugin instead of VuePlugin.

affects: >=0.5.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'component')

Vue instance not passed or not mounted correctly

fix

Ensure vue option is provided: editor.use(VueRenderPlugin, { vue: app }) where app is a mounted Vue instance.

Uncaught Error: Component 'num' not found

Node component not registered before adding node

fix

Register component with editor.register(new NumComponent(...)) before editor.addNode.

Vue warn]: Unknown custom element: <rete-node> - did you register the component correctly?

Global Vue component not registered by plugin

fix

Mount Vue app after plugin use; ensure plugin installs the rete-node component globally.

Upgrade

Version history

0.5.2latest on npm

Audit

Dependencies

reterequiredPeer dependency for core editor functionality

vuerequiredPeer dependency for Vue renderer integration (Vue 2 or 3)

Agent activity

27 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/retejs/vue-render-plugin ↗

packagerete-vue-render-plugin ↗

homepagehttps://github.com/retejs/vue-render-plugin#readme ↗