@dammers/use-signalr-vue

@dammers/use-signalr-vue

Plugin and composables for typed SignalR in Vue. Part of use-signalr.

Install

npm install @dammers/use-signalr-vue @microsoft/signalr

It needs Vue ^3.3, @microsoft/signalr ^8 || ^9 || ^10, and Node 20.19 or later.

Example

This file declares a hub, connects it, and reads a typed method result:

import { createApp, ref } from "vue";
import { createSignalRClient, method } from "@dammers/use-signalr-vue";
import App from "./App.vue";

export const signalR = createSignalRClient({
  hubs: {
    "/hubs/rooms": {
      methods: { GetHistory: method<[roomId: string], { text: string }[]>() },
    },
  },
});

createApp(App)
  .use(signalR, { baseUrl: "https://api.example.com", accessTokenFactory: () => "token" })
  .mount("#app");

// Call this composable in a component's setup().
export function useHistoryCount(roomId: string) {
  const getHistory = signalR.useSignalRInvoke("/hubs/rooms", "GetHistory");
  const count = ref(0);
  const load = () => getHistory(roomId).then((m) => (count.value = m.length)).catch(console.error);
  return { count, load };
}

Documentation

• Quick start
• Provider setup
• Events and calls
• Connection status and recovery
• API reference
• Troubleshooting

License

MIT © DammersCode