Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
createVueTemplate
✓ RED.plugins.get('node-red-vue').createVueTemplate("my-node-name", __filename)
✗ import { createVueTemplate } from 'node-red-vue';
This is the primary way to register a Vue component as a Node-RED node template from within your custom node's `.js` file. It's an interaction with the Node-RED plugin API, not a direct JavaScript import of the `node-red-vue` package.
Vue Component Definition
✓ export default {
props: {},
data() { return {}; },
methods: {},
node_red: {},
help: ''
}
✗ import { defineComponent, setup } from 'vue';
export default defineComponent({
setup() {}
})
Node-RED Vue explicitly requires node templates to be written using the Vue Options API, not the newer Vue Composition API (`setup()` function or `defineComponent`).
update:prop event
✓ this.$emit('update:propName', newValue);
✗ this.propName = newValue;
When a node property changes within the Vue component, you must emit an `update:propName` event with the new value. Directly modifying props is not supported and will not persist changes to the Node-RED configuration.
This quickstart illustrates how to define a Node-RED node in JavaScript and register its Vue-based configuration template, alongside the complete Vue component (`.vue` file) structure including props, methods for emitting updates, `node_red` properties, and markdown help text.
// my-node.js (located in your Node-RED user directory, e.g., ~/.node-red/nodes/my-node)
module.exports = function(RED) {
function MyNode(config) {
RED.nodes.createNode(this, config);
this.name = config.name;
this.value = config.value;
this.configNode = config.configNode; // For a config node reference
// Additional runtime logic for your node
}
RED.nodes.registerType("my-node", MyNode);
// Register the Vue template for this node
RED.plugins.get('node-red-vue').createVueTemplate("my-node", __filename);
}
// my-node.vue (must be in the same directory as my-node.js)
<template>
<div class="node-red-vue-config">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" :value="name" @input="updateName">
</div>
<div class="form-row">
<label for="node-input-value">Value</label>
<input type="number" id="node-input-value" :value="value" @input="updateValue">
</div>
<div class="form-row">
<label for="node-input-configNode">Config Node Ref</label>
<input type="text" id="node-input-configNode" :value="configNode" @input="updateConfigNode">
</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: "default-name"
},
value: {
type: Number,
default: 0
},
configNode: {
type: String,
configType: "my-config-node-type" // Specify the type of the config node
}
},
methods: {
updateName(event) {
this.$emit('update:name', event.target.value);
},
updateValue(event) {
this.$emit('update:value', Number(event.target.value));
},
updateConfigNode(event) {
this.$emit('update:configNode', event.target.value);
}
},
node_red: {
category: 'function',
color: '#a6bbcf',
inputs: 1,
outputs: 1,
icon: 'font-awesome/fa-cube',
label: function() { return this.name || 'my-node'; },
labelStyle: function() { return this.name ? "node_label_italic" : ""; }
},
help: `
# My Custom Node-RED Vue Node
This is a demonstration of a Node-RED node whose configuration interface
is built entirely with Vue.js.
## Configuration Options
* **Name**: A descriptive name for this node instance.
* **Value**: An example numeric setting.
* **Config Node Ref**: A reference to a global configuration node.
`
}
</script>
<style scoped>
/* Basic styling for the configuration pane */
.node-red-vue-config {
padding: 10px;
font-family: sans-serif;
}
.form-row {
margin-bottom: 10px;
}
.form-row label {
display: inline-block;
width: 120px;
font-weight: bold;
vertical-align: middle;
}
.form-row input {
width: calc(100% - 130px);
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 4px;
vertical-align: middle;
}
</style>
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'createVueTemplate')
The `node-red-vue` plugin is not correctly installed, loaded, or accessible within the Node-RED runtime when `RED.plugins.get('node-red-vue')` is called. This often happens if the package is not installed in the correct Node-RED user directory or Node-RED hasn't been restarted.
fixEnsure `node-red-vue` is installed in your Node-RED user directory (`~/.node-red`) via `npm install node-red-vue` and then restart your Node-RED instance.
Vue component renders but changes to properties are not saved or reflected in Node-RED
The Vue component is not correctly emitting `update:propName` events when a property value changes, or is attempting to directly mutate props. Node-RED Vue relies on these events to capture and persist configuration changes.
fixFor every prop named `propName`, ensure a corresponding `this.$emit('update:propName', newValue)` call is made whenever the value is modified by the user within the component. For example, use `@input="updateMyProp"` on an input element, where `updateMyProp` calls `$emit('update:myProp', event.target.value)`. Node-RED editor shows an empty or malformed configuration panel for a Vue node
The `.vue` file is either missing, incorrectly named, or contains syntax errors that prevent the `node-red-vue` plugin from compiling it. Alternatively, the `node_red` property object within the Vue component is malformed.
fixVerify that the `.vue` file exists in the same directory as the `.js` file, has the exact same base name, and is a valid Vue Options API component. Check the Node-RED logs for compilation errors. Ensure the `node_red` object includes mandatory properties like `category`, `inputs`, and `outputs`.
Audit
Dependencies
node-redrequiredThis package is a plugin for Node-RED and requires a Node-RED runtime to function. It leverages Node-RED's plugin API.
vuerequiredThe entire premise of this library is to use Vue.js for node templates. Vue runtime is loaded into the flow editor by the plugin.