02. Configuration

The plugin accepts a configuration object with the following values:

url

Required: Yes

Type: string

The address to your SignalR hub.

disconnected

Required: No

Type: function() => void

Callback to trigger when the connection is lost or the connection fails to connect. I used a redirect here, but you can probably get creative with some fancy state management or something.

Example

app.use(VueSignalR, {
  /* ... */
  disconnected() {
    router.push('/disconnected');
  }
});

reconnected

Required: No

Type: function() => void

Callback to trigger when the connection is reestablished. Works similarly to disconnected.

accessTokenFactory

Required: No

Type: function() => string | Promise<string>

Factory that returns an access token to pass to the hub. You will need to configure your server to pass the access token to your hub. This can either return the access token directly or a promise to retrieve the access token.

Examples

This method directly returns to access token:

app.use(VueSignalR, {
  /* ... */
  accessTokenFactory: () => '<my-access-token>'
});

For more advanced usage, you can also return a promise (or use async/await).

app.use(VueSignalR, {
  /* ... */
  accessTokenFactory: async () => await authService.getAccessToken()
});

prebuild

Required: No

Type: function(HubConnectionBuilder, IHttpConnectionOptions) => void

If the built-in configuration options are not enough for you, Vue SignalR provides access to the builder. In order to hook into the builder, you need to pass a prebuild method in the configuration object upon initialization.

Example

app.use(VueSignalR, {
  /* ... */
  prebuild(builder: HubConnectionBuilder) {
    builder.configureLogging(LogLevel.Information);
  }
});

automaticReconnect

Required: No | Default: false

Type: boolean

When true, the connection will automatically attempt to reconnect.

automaticUnsubscribe

Required: No | Default: true

Type: boolean

When true, events will automatically be unsubscribed when a component is destroyed.

Automatic unsubscribe can also be configured per-basis by passing a third boolean argument to signalr.on. This option will always take precendence over the initial configuration, so regardless of whether it's enabled or not, true will always automatically unsubscribe, and false will always prevent it.

Examples

// Unsubscribes
signalr.on(MessageReceived, messageReceivedCallback, true);

// Does not unsubscribe
signalr.on(MessageReceived, messageReceivedCallback, false);