UIbuilder + Vue.js + bootstrap-vue for Node-RED

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.

Simple input using Vue

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.


To tick or not to tick? That is the question
Increment   Click Counter: {{counterBtn}}.

Click on the button to increment the counter. It sends the data dynamically back to Node-RED as well.

Dynamic Data

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.