# 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.