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.
48 lines (34 loc) • 1.66 kB
HTML
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue3 as EMS with new uib client - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Vue3 as ESM with new uib client">
<link rel="icon" href="./images/node-blue.ico">
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- NOTE that this is loaded as a MODULE & other libraries loaded by it -->
<script type="module" async src="./index.js">/* Imports uibuilder + your custom code */</script>
</head><body class="uib">
<div id="app">
<h1 class="with-subtitle">Vue v3 App</h1>
<div role="doc-subtitle">Using the uibuilder ESM library. Loads a Vue component directly without a build step.</div>
<p>
{{message}}
</p>
<div id="more"><!-- '#more' is used as a parent for dynamic content in examples --></div>
<mycomponent></mycomponent>
<p>
<button @click="doEvent" data-mything="This is a thing" title="This is sent back to Node-RED">
Click to send msg to Node-RED
</button>
</p>
<p>
<label for="input1">This is sent to Node-RED when you exit it: </label>
<input v-model="input1" @change="doEvent" id="input1" type="text" placeholder="Type text then exit field">
</p>
</div>
<script nomodule>
document.getElementById('app').innerHTML = "Your browser doesn't support JavaScript modules :(";
</script>
</body></html>