TypeScript icon, indicating that this package has built-in type declarations

    0.0.6 • Public • Published

    Vue SignalR Plugin

    NPM Install

    This plugin has only been tested with Vue 3 and TypeScript. Use at your own risk.


    To install in Vue 3:

    import { createApp } from 'vue';
    import { VueSignalR } from '@quangdao/vue-signalr';
    import App from './App.vue';
      .use(VueSignalR, { url: 'http://localhost:5000/signalr' })


    The plugin accept a configuration object with the following values:

    Property Required Description
    url Yes The address to your SignalR server
    disconnected No Callback to call when the connection is severed
    automaticReconnect No Whether to enable automatic reconnections


    This plugin provides a composable function to inject the SignalR service:

    import { inject } from 'vue';
    import { useSignalR } from '@quangdao/vue-signalr';
    export default {
      setup() {
        const signalr = useSignalR();


    For type safety, I recommend declaring constant tokens. As an example:

    import { MyObject } from '@/models/my-object';
    import { HubCommandToken, HubEventToken } from '@quangdao/vue-signalr';
    const SendMessage: HubCommandToken<MyObject> = 'SendMessage';
    const MessageReceived: HubEventToken<MyObject> = 'MessageReceived';
    // models/my-object.ts
    interface MyObject {
      prop: string;

    Note: In version 0.0.5, SignalRClientMethod and SignalRServerMethod were renamed to HubEventToken and HubCommandToken, respectively. The original names are exported as aliases for compatibility reasons, but will be removed in a final release. Please make sure to update these accordingly if you are upgrading from 0.0.4.

    Receiving Messages

    If you used tokens mentioned above:

    setup() {
      signalr.on(MessageReceived, (message) => console.log(message.prop));

    Alternative, you can pass in the method name as a string, with an optional type argument for the data:

    // Both of these work:
    signalr.on('MessageReceived', message => console.log(message.prop)); // Data object is untyped
    signalr.on<MyObject>('MessageReceived', message => console.log(message.prop));


    Eventually, I want to automatically unbind all subscription within the context of a component when that component is destroyed, but for now I recommend unsubscribing from all of your connections onBeforeUnmount.

    Same rules regarding tokens above apply here.

    setup() {
      const messageReceivedCallback = (message) => console.log(message.prop);
      signalr.on(MessageReceived, messageReceivedCallback);
      onBeforeUnmount(() => signalr.off(MessageReceived, messageReceivedCallback));

    Sending Message

    To send a message to the server, you can either invoke a command if you are expecting a response, or send a command without waiting for an acknowledgement. Same rules regarding tokens above apply to both methods.

    signalr.send(SendMessage, { prop: 'value' });
    signalr.invoke(SendMessage, { prop: 'value' }).then(response => doSomethingWith(response));

    Error Handling

    Errors are handled at the app level by passing in a property to the options object. I used a redirect here, but you can probably get creative with some fancy state management or something.

    import { createApp } from 'vue';
    import { VueSignalR } from '@quangdao/vue-signalr';
    import router from './router';
    import App from './App.vue';
      .use(VueSignalR, {
        url: 'http://localhost:5000/signalr',
        disconnected() {


    npm i @quangdao/vue-signalr

    DownloadsWeekly Downloads






    Unpacked Size

    159 kB

    Total Files


    Last publish


    • quangdao