Global Vue variable is undefined in components

Question

I am implementing SignalR in ASP.NET Core in my vuejs front end. In order to do this I need a global variable to access these events in my components but for some reason the dashboardHub variable shows undefined in console. Am I declaring them incorrectly on my vue instance?

    <script>//setup routing using SPA VUE interface
    Vue.use(VueRouter);

    const routes = [
        { path: '/', component: dashboard },
    ]

    const router = new VueRouter({
        routes, // short for `routes: routes`
    })

    console.log('Signalr mounted', window['signalR']); // output : Undefined 
    var signalR = window.signalR;
    try {
        this.connection = new signalR.HubConnectionBuilder()
            .withUrl(window.location.origin + '/dashboardHub', {})
            .withAutomaticReconnect()
            .build();
        console.log('Signalr Connection', connection);
    } catch (error) {
        console.error('SignalR error ', error)
    }

    // use new Vue instance as an event bus
    const dashboardHub = new Vue()
    // every component will use this.$questionHub to access the event bus
    Vue.prototype.$dashboardHub = dashboardHub
    // Forward server side SignalR events through $questionHub, where components will listen to them
    connection.on('UpdateDashboard', () => {
        dashboardHub.$emit('review-movement-hub')
    })

    var vm = new Vue({
        el: '#app',
        vuetify: new Vuetify({
            options: {
                customProperties: true
            },
            theme: {
                themes: {
                    light: {
                        primary: '#6237A0',
                        secondary: '#9754CB',
                        alternatePrimary: '#7cb6b1',
                        accent: '#DEACF5',
                        textaccent: '#28104E',
                        background: '#f7f7f7',
                        error: '#b71c1c',
                    },
                },
            },
        }),
        router,
        data() {
            return {
                flexcontainer: {
                    'display': 'flex'
                },
                flexchild: {
                    'min-width': '0',
                    'flex': '1 1 auto',
                }
            }
        }

    }).$mount('#app')
</script>

I use the dashboard variable in my dashboard components as follows:

            created() {
            console.log(this.dashboardHub)
            // Listen to score changes coming from SignalR events
            this.dashboardHub.$on('review-movement-hub', this.test)
        },

However in the console.log it comes back as undefined but I did define it in the declaration section of my vue instance as shown above.

Answer 1

If you defined the variable as:

Vue.prototype.$dashboardHub = dashboardHub

Then you access it with the dollar prefix from the Vue instance

created() {
    this.$dashboardHub.$on('review-movement-hub', this.test)
},