Uibuilder vue-router without compiling

General
32

You can access the uibuilder object from any .vue file. Below, I've updated my IndexView.vue view component to include a button that uses the uibuilder.eventSend helper function with the data it sends built from any data-* attributes you add to the button tag. Of course, you can us the normal uibuilder.send function in your methods too. Make sure you show the full msg in Node-RED so that you can see the meta-data that eventSend adds to the message which tells you which tag triggered the event.

<template>
    <div :id="$route.name" class="d1"><!-- only 1 root element allowed -->
        <p>Home, home on the range</p>
        <p>Hello {{myprop}}</p>
        <p>Route Name: {{ $route.name }}</p>
        <p title="custom props on the router definiting var are not exposed">Route custom prop 'greeting' (doesn't work): {{ $route.greeting }}</p>

        <p><slot>This is the slot, this text is replaced if any content is put between the <code>&lt;router-view&gt;&lt;/router-view&gt;</code> tags</slot></p>

        <button v-on:click="$emit('ooh-you-clicked', {some: 'thing'})">
            Click Me!
        </button>
        <button id="sendToNR" @click="doEvent" data-from="from IndexVuew.vue" data-something="else">
            Send to Node-RED
        </button>
        {{ currentRouteData }}
    </div>
</template>

<script>
    console.log('>> IndexView script >> ', this)

    module.exports = {
        props: {
            'myprop': {type: String, default: 'Nothing Useful'},
        },

        computed: {
            currentRouteData() {
                console.log('>>>> IndexView $route >>', this.$route)
                return '' //JSON.stringify(this.$route)
            }
        },

        methods: {
            doEvent: uibuilder.eventSend,
        },

        data: function data() {
            return { // must use return so that each instance of the component has isolation

            }
        },

        created: function() {
            console.log('>> IndexView CREATED >>')
        },
        mounted: function() {
            console.log('>> IndexView MOUNTED >>')
        },
        updated: function() {
            console.log('>> IndexView UPDATED >>')
        },
        destroyed: function() {
            console.log('>> IndexView DESTROYED >>')
        },

        setup() { // Vue v3 only
            console.log('>> setting up IndexView.vue >>')
        },
    }
</script>

<style scoped>
    div#index {
        border: 1px solid rgb(167, 29, 29);
    }
    div.d1 {
        border: 1px solid silver;
    }
</style>

msg:

{
   "uibDomEvent":{
      "sourceId":"sendToNR",
      "event":"click"
   },
   "payload":{
      "from":"from IndexVuew.vue",
      "something":"else"
   },
   "_socketId":"yiD9rF7BbebgCFbqAABt",
   "_msgid":"ccd519b895858d0f"
}