[Vuejs]-How to load signal in CDN VueJS application

0👍

To use SignalR from CDN in the browser, use the browser build (you’re currently using the CommonJS build):

https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js"></script>

<div id="app">
    <global-component ></global-component>
</div>

<script>
    Vue.use(window['vue-toastify'].default);
    
    Vue.component('global-component', {
        data: function () {
            return {
                message: `I'm from Global`,
                connection: null,
            }
        },
        mounted() {
            console.log('Signalr mounted', window['signalR']);
            var signalR = window.signalR;
            try {
                this.connection = new signalR.HubConnectionBuilder()
                .withUrl("https://ab.xyz.com/signalhub/", {})
                .withAutomaticReconnect()
                .build();
                console.log('Signalr Connection', this.connection);
            } catch (error) {
                console.error('SignalR error ', error)
            }
            this.$vToastify.success('Mounted...');
        },
        template: `
          <div> Hey.... {{message}} </br> </div>
        `,
    });
    const myVueInstance = new Vue({
        el: "#app"
    }) 
</script>

Leave a comment