-
-
Notifications
You must be signed in to change notification settings - Fork 85
Setup and use a component in uibuilder with Vue3 and vue3 sfc loader
Many thanks to Fabio Marzocca for this contribution.
This page is the Vue v3 equivalent of using http-vue-loader with Vue v2.
Setup and use a component in uibuilder, with Vue3
and vue3-sfc-loader
. I'd rather not to mess up things in your wiki (do not suggest to load the library in Library Manager, but use the CDN instead).
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder ">
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
</head>
<body>
<div id="my-app">
<my-component :greeting="myGreeting" :who="myWho"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.global.js"></script>
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<script src="./uibuilderfe.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
<script src="./index.js"></script>
</body>
</html>
index.js
/* eslint-disable strict */
/* jshint browser: true, esversion: 6, asi: true */
/* globals uibuilder */
// @ts-nocheck
/** Minimalist code for uibuilder and Node-RED */
'use strict'
const { createApp, ref } = Vue
const options = {
moduleCache: {
vue: Vue
},
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(res.statusText + ' ' + url), { res });
return {
getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
}
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
data() {
return {
myGreeting: 'Hi there',
myWho: 'oh wise one!',
}
}, // --- End of data --- //
components: {
'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
},
})
app.mount('#my-app')
myComponent.vue
<template>
<div>
<div class="hello">
{{ greeting }} {{ who }}
</div>
<slot>
Default slot content, replace with your own text between the component tags.
See the <a href="https://vuejs.org/guide/components/slots.html" target="_blank">VueJS documentation for
slots</a> for more information.
</slot>
<div class="example">{{ msg }}</div>
</div>
</template>
<script>
export default {
props: {
greeting: String,
who: String
},
data() {
return {
msg: 'This is a message!',
color: 'red',
}
}
}
</script>
<style scoped>
.hello {
background-color: #ffe;
font-size: 2rem;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin: 25px;
}
.example {
margin-top: 5em;
color: v-bind('color');
text-align:center;
}
</style>
Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)