node-red-contrib-uibuilder
Version:
Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.
42 lines (30 loc) • 980 B
JavaScript
// @ts-nocheck
const { createApp } = Vue
// Using the Vue options API style for beginner simplicity
// No need to pre-define Quasar's $q when working with the options API
const app = createApp({
// Define Vue reactive variables
data() { return {
message: 'Hello Vue!',
count: 0,
input1: '',
} },
// Dynamic data
computed: {},
// Supporting functions
methods: {
// REALLY Simple method to return DOM events back to Node-RED.
doEvent: (event) => uibuilder.eventSend(event),
},
// Lifecycle hooks
mounted() {
// If msg changes - msg is updated when a standard msg is received from Node-RED
uibuilder.onChange('msg', (msg) => {
console.log('>> msg recvd >>', msg, this)
// If the msg.payload is a string, show in on the page
if (typeof msg.payload === 'string') this.message = msg.payload
})
},
})
app.mount('#app')