{"library":"node-red-vue","title":"Node-RED Vue Integration","description":"Node-RED Vue is a plugin that facilitates the development of custom Node-RED node configuration templates using Vue.js components instead of traditional raw HTML and JavaScript files. Currently at version 0.1.15, the project explicitly labels itself as a 'construction zone,' indicating active development, rapid iteration, and a likelihood of frequent breaking changes. Its core purpose is to modernize Node-RED node development by offering benefits such as hot-module reloading, a cleaner abstraction for handling node properties (including automatic type conversions and input initialization), and the ability to utilize modern styling frameworks like TailwindCSS. This approach aims to streamline the developer experience by moving away from jQuery-style DOM manipulation, though it strictly mandates the use of Vue's Options API over the newer Composition API.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install node-red-vue"],"cli":null},"imports":["RED.plugins.get('node-red-vue').createVueTemplate(\"my-node-name\", __filename)","export default {\n  props: {},\n  data() { return {}; },\n  methods: {},\n  node_red: {},\n  help: ''\n}","this.$emit('update:propName', newValue);"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// my-node.js (located in your Node-RED user directory, e.g., ~/.node-red/nodes/my-node)\nmodule.exports = function(RED) {\n    function MyNode(config) {\n        RED.nodes.createNode(this, config);\n        this.name = config.name;\n        this.value = config.value;\n        this.configNode = config.configNode; // For a config node reference\n        // Additional runtime logic for your node\n    }\n    RED.nodes.registerType(\"my-node\", MyNode);\n\n    // Register the Vue template for this node\n    RED.plugins.get('node-red-vue').createVueTemplate(\"my-node\", __filename);\n}\n\n// my-node.vue (must be in the same directory as my-node.js)\n<template>\n  <div class=\"node-red-vue-config\">\n    <div class=\"form-row\">\n      <label for=\"node-input-name\"><i class=\"fa fa-tag\"></i> Name</label>\n      <input type=\"text\" id=\"node-input-name\" :value=\"name\" @input=\"updateName\">\n    </div>\n    <div class=\"form-row\">\n      <label for=\"node-input-value\">Value</label>\n      <input type=\"number\" id=\"node-input-value\" :value=\"value\" @input=\"updateValue\">\n    </div>\n    <div class=\"form-row\">\n      <label for=\"node-input-configNode\">Config Node Ref</label>\n      <input type=\"text\" id=\"node-input-configNode\" :value=\"configNode\" @input=\"updateConfigNode\">\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    name: {\n      type: String,\n      default: \"default-name\"\n    },\n    value: {\n      type: Number,\n      default: 0\n    },\n    configNode: {\n      type: String,\n      configType: \"my-config-node-type\" // Specify the type of the config node\n    }\n  },\n  methods: {\n    updateName(event) {\n      this.$emit('update:name', event.target.value);\n    },\n    updateValue(event) {\n      this.$emit('update:value', Number(event.target.value));\n    },\n    updateConfigNode(event) {\n      this.$emit('update:configNode', event.target.value);\n    }\n  },\n  node_red: {\n    category: 'function',\n    color: '#a6bbcf',\n    inputs: 1,\n    outputs: 1,\n    icon: 'font-awesome/fa-cube',\n    label: function() { return this.name || 'my-node'; },\n    labelStyle: function() { return this.name ? \"node_label_italic\" : \"\"; }\n  },\n  help: `\n# My Custom Node-RED Vue Node\n\nThis is a demonstration of a Node-RED node whose configuration interface\nis built entirely with Vue.js.\n\n## Configuration Options\n\n*   **Name**: A descriptive name for this node instance.\n*   **Value**: An example numeric setting.\n*   **Config Node Ref**: A reference to a global configuration node.\n`\n}\n</script>\n\n<style scoped>\n/* Basic styling for the configuration pane */\n.node-red-vue-config {\n  padding: 10px;\n  font-family: sans-serif;\n}\n.form-row {\n  margin-bottom: 10px;\n}\n.form-row label {\n  display: inline-block;\n  width: 120px;\n  font-weight: bold;\n  vertical-align: middle;\n}\n.form-row input {\n  width: calc(100% - 130px);\n  padding: 6px 10px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  vertical-align: middle;\n}\n</style>","lang":"javascript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}