This is a uibuilder example using Vue.js as a front-end library. See the node-red-contrib-uibuilder README for details on how to use UIbuilder.
You can very simply create a form using Vue & bootstrap-vue.
The form sends data back to Node-RED.
Look at the increment
method in index.js
to see how easy this is.
Click on the button to increment the counter. It sends the data dynamically back to Node-RED as well.
Uses Vue to dynamically update in response to messages from Node-RED.
Check out the mounted
function in index.js
to See
how easy it is to update Vue data from Node-RED.
Socket.io Connection Status: {{socketConnectedState}}
Time offset between browser and server: {{serverTimeOffset}} hours
Messages: Received={{msgsReceived}}, Sent={{msgsSent}}
The received message is from the input to the uibuilder node. The send message will appear out of port #1 of the node.
Control Messages: Received={{msgsControl}}, Sent={{msgsCtrlSent}}
Control messages always appear out of port #2 of the uibuilder node
whether they are from the server or the client. The from
property
of the message tells you where it came from.