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.
52 lines (38 loc) • 2.27 kB
HTML
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Vue3 with new uib client - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Simple Vue3 with new uib client">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed -->
<!-- <script defer src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.global.prod.js">/* Remove .prod for development version */</script> -->
<script defer src="../uibuilder/vendor/vue/dist/vue.global.prod.js">/* Remove .prod for development version */</script>
<script defer src="../uibuilder/uibuilder.iife.min.js">/* THE UIBUILDER LIBRARY MUST BE IN THE HTML! DO NOT REMOVE */</script>
<script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
<!-- #endregion -->
</head><body class="uib">
<div id="app">
<h1 class="with-subtitle">uibuilder + Vue v3</h1>
<div role="doc-subtitle">Using the IIFE library. Loads external modules using the SFC Loader library</div>
<p>{{ message }}</p>
<div id="more"><!-- '#more' is used as a parent for dynamic content in examples --></div>
<p>
<button @click="count++" title="Not sent back to Node-RED - this just shows that VueJS is working">
Simple VueJS Counter: {{ count }}
</button>
</p>
<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="doInputChange" id="input1" type="text" placeholder="Type text then exit field">
</p>
<pre id="msg" v-html="formatLastRcvd" class="syntax-highlight">Waiting for a message from Node-RED</pre>
</div>
</body></html>