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.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
This is the default export used for plugin installation via `app.use()` in Vue 3 or `Vue.use()` in Vue 2.
import ActionCableVue from 'actioncable-vue'
Introduced for Vue 3 Composition API usage to access the cable instance and subscription methods (`subscribe`, `unsubscribe`).
import { useCable } from 'actioncable-vue'
Available on the Vue instance (e.g., in Options API components) after the plugin is installed. It exposes methods like `connection` and `subscriptions`.
this.$cable
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.
import { createApp } from 'vue';
import App from './App.vue';
import ActionCableVue from 'actioncable-vue';
const actionCableVueOptions = {
debug: true,
debugLevel: 'info',
// Example: Connect to a local ActionCable server. In production, this would be your backend URL.
// Use process.env for sensitive or environment-specific URLs.
connectionUrl: process.env.VUE_APP_ACTION_CABLE_URL ?? 'ws://localhost:3000/cable',
connectImmediately: true,
unsubscribeOnUnmount: true,
// Optional: If you use Vuex or Pinia, you can pass your store here for easier access within channels.
// store: myVuexStore
};
createApp(App)
.use(ActionCableVue, actionCableVueOptions)
.mount('#app');
// Example component usage with Composition API
// <script setup>
// import { useCable, onMounted, onUnmounted, ref } from 'actioncable-vue';
// const { subscribe, unsubscribe, cable } = useCable();
// const message = ref('');
// let chatSubscription;
// onMounted(() => {
// chatSubscription = subscribe(
// { channel: 'ChatChannel', room: 'general' },
// {
// received(data) {
// message.value = data.message; // Assuming data has a 'message' field
// console.log('Received:', data);
// },
// connected() {
// console.log('Connected to ChatChannel');
// },
// disconnected() {
// console.log('Disconnected from ChatChannel');
// }
// }
// );
// });
// onUnmounted(() => {
// if (chatSubscription) {
// unsubscribe(chatSubscription);
// }
// });
// </script>
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.