actioncable-vue is a Vue plugin designed to simplify the integration of ActionCable, Ruby on Rails' WebSocket framework, into Vue.js applications. It provides a straightforward API for managing WebSocket connections, subscribing to channels, and handling real-time data. Currently at stable version 3.1.2, the package appears to have an active development cadence, indicated by recent commits and continuous maintenance. A key differentiator is its support for both Vue 2 and Vue 3, allowing developers to use the same plugin across different generations of Vue projects, adapting its API usage accordingly. It abstracts away much of the boilerplate associated with direct ActionCable consumer usage, offering options for debugging, connection URL configuration (including dynamic URLs for JWTs), immediate connection, and automatic unsubscription upon component unmount.
npm install actioncable-vueVerified import paths — ran on the pinned version, not inferred.
Demonstrates how to install `actioncable-vue` as a Vue 3 plugin and configure its connection options. It includes a commented-out example of how to use `useCable` in a Composition API component to subscribe to a channel and handle messages.
For Vue 3, update your `main.js` or `main.ts` to use `createApp().use(ActionCableVue, options)`. For Vue 2, continue using `Vue.use(ActionCableVue, options)`.
Always explicitly set the `connectionUrl` option to your ActionCable server's WebSocket endpoint, especially in production or when your frontend and backend are on different domains. Example: `connectionUrl: 'ws://your-api-domain.com/cable'`.
If your ActionCable server requires dynamic authentication (e.g., JWT in query params), configure `connectionUrl` as a function: `connectionUrl: () => `ws://localhost:3000/cable?token=${yourAuthToken}`.Ensure `connectImmediately` aligns with your application's needs. If `false`, manually trigger connection using `this.$cable.connection.connect()` or ensure a subscription is initiated to establish the connection. Keep `unsubscribeOnUnmount` as `true` unless you have a specific reason to maintain subscriptions after component destruction.
Ensure `createApp(App).use(ActionCableVue, options)` is called before mounting your Vue 3 application, or `Vue.use(ActionCableVue, options)` for Vue 2. Verify that `$cable` is accessed within a component's lifecycle hook or method.
Double-check that your Rails ActionCable server is running and configured correctly. Verify the `connectionUrl` in your `actioncable-vue` options matches the actual WebSocket endpoint of your backend. Ensure no firewalls or proxies are blocking the connection.
Ensure `@rails/actioncable` (if directly used) or `actioncable` (as a dependency of `actioncable-vue`) is correctly installed and compatible with your build setup. Update `actioncable-vue` and `actioncable` to their latest versions. You might need to adjust your build tool's configuration (e.g., Vite's `optimizeDeps` or `alias`) if the issue persists.