Do we have any example of how to import in UIbuilder 6.1

General
1

Hi, Sorry for my bad English

Normally I use UIBuidler V5.xx Now I move to V6.x and I don't know how to import the library. In V5 I copy URL to HTML page. But in V6 I don't know to import copy to each component / Index.js or Main.js.

I need to try some front-end libraries like Vuetify. I'm not very experienced with vue3.

2

You could perhaps share an example of a v5 index.js and we can explore what, if anything, needs to change.

The big change - which was there in v5 but not necessarily the main thrust - is the move over to the new client library. This is very much better than the old as evidenced by how quickly it is now developing.

But v6 of uibuilder has updated examples that you can simply import. The "Templates" example for instance includes an example of each of the available templates including 4 Vue templates. 2 for Vue v2 and 2 for v3.

image
image1701Ă—628 111 KB

The v3 templates deliberately use the older-style Vue coding standards because I think these are easier for beginners and easier for people wanting to transition between v2 and v3. So those templates work out of the box and you can use them to help transition.

I also have a terribly simplistic vuetify example - I just need to tweak it to better use the newer standards for uibuilder v6.1. It doesn't really do anything useful but it does demonstrate using the library at least. I will share here shortly.

3

Hmm, just tried vuetify again and it seems that the latest version is not so easy. So here is an example that uses Vue v2 and vuetify v2.

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>VueJS + Vuetify - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - VueJS + Vuetify">

    <link rel="icon" href="./images/node-blue.ico">

    <!-- Your own CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <!-- <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/vuetify/dist/vuetify.min.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@2.x/dist/vue.js"></script>
    <!-- <script defer src="../uibuilder/vendor/vue/dist/vue.js"></script> -->
    <!-- <script defer src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script> -->
    <!-- <script defer src="../uibuilder/vendor/vuetify/dist/vuetify.min.js"></script> -->
    <script defer src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body>

    <div id="app" v-cloak>
        <v-app>
            <v-app-bar app></v-app-bar>
            <v-main>
                <v-container>
                    <h1>uibuilder + Vue.js + Vuetify for Node-RED</h1>
                    
                    <p>{{mymsg}}</p>
                </v-container>
            </v-main>
        </v-app>
    </div>

</body></html>

/* jshint browser: true, esversion: 5, asi: true */
/*globals Vue, uibuilder */
// @ts-nocheck
'use strict'

// eslint-disable-next-line no-unused-vars
const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() { return {

        mymsg: 'Hello World',

    }}, // --- End of data --- //

    /** Called once all Vue component instances have been loaded and the virtual DOM built */
    mounted: function(){

        // If msg changes - msg is updated when a standard msg is received from Node-RED
        uibuilder.onChange('msg', (msg) => {
            this.mymsg = msg.payload
        })

    }, // --- End of mounted hook --- //

}) // --- End of app definition --- //

// EOF

A v3 example will need more work and looks like it will have to use the ESM version of the uibuilder client library.

4

OK, figured it. Here is a Vue v3 and vuetify v3 example.

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>VueJS + Vuetify - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - VueJS + Vuetify">

    <link rel="icon" href="./images/node-blue.ico">

    <!-- Your own CSS -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.css" rel="stylesheet">
    <!-- <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"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/vuetify@latest/dist/vuetify.min.js"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body>

    <div id="app" v-cloak>
        <v-app>
            <v-app-bar app></v-app-bar>
            <v-main>
                <v-container>
                    <h1>uibuilder + Vue.js + Vuetify for Node-RED</h1>
                    
                    <p>{{mymsg}}</p>
                </v-container>
            </v-main>
        </v-app>
    </div>

</body></html>

/* jshint browser: true, esversion: 5, asi: true */
/*globals Vue, uibuilder */
// @ts-nocheck
'use strict'

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
    // Define Vue reactive variables
    data() { return {

        mymsg: 'Hello Vue!',

    } },

    // 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.mymsg = msg.payload
        })
    },
})

app.use(vuetify).mount('#app')

Bear in mind though that many of the vuetify v3 examples seem to use ESM import statements which is a bit annoying as you have to mentally change things around. The CDN versions of the libraries I've used in this example include everything which is why you don't need any of the import statements. So if you decide to install them locally, you would need to do some translation. Vue v3 not so bad as the Templates example shows you how. But a local install of vuetify is not something I've done myself.

Hope this isn't too confusing. Suffice it to say that none of this complexity is uibuilder's fault, that will work with any version of any library, it is the ever-growing complexity of Vue and its extended libraries that is the issue.

5

Thank you so much for your fast and helpful response, I really appreciate it!
:grin:

1 Like
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.