Problems with Custom Event

I was trying to generate a custom even as described in the Dashboard 2 Info;

<v-btn @click="$socket.emit('ui-event', 'custom-event-name', msg)">Send Custom Event</v-btn>

I created a ui-template with the following code

    <div class = "gapButton">
        <v-btn @click="$socket.emit('ui-event', '$myEvent', {topic: 'event'})">Event</v-btn>

        <v-btn @click="sendData()">Event Data</v-btn>

        <v-btn @click="sendEvent()">Send Event</v-btn>



    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                eventData: {topic: '$myEvent', payload: {id:}}

        methods: {
            sendData: function () {
                this.send( this.eventData )


            sendEvent: function() {
                this.$socket.emit( 'ui-event', '$myEvent', {topic: 'event'} )



    .gapButton {
        display: flex;
        gap: 0.2rem;

and then connected up an event node and a debug node. My thought was that I should get an output when my event was emitted, but not so. I have either messed up the generator, or I have got the wrong end of the stick and this is not how it is supposed to work.

Hopefully someone can put me straight

I need ton investigate this, busy prepping for Webinar tomorrow, but have set myself a reminder to get back to you on Friday morning

Can confirm this doesn't work, when it should/ Will open an issue and investigate.

PR opened with a fix/update to the documentation: UI Event: Ensure consistency in API & docs for custom UI Events by joepavitt · Pull Request #632 · FlowFuse/node-red-dashboard · GitHub

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