Official package · Frameworks

Vue composables for realtime WebSockets

Composables for events, presence, client events and connection state on Vue 3 and Vue 2.7. Channel names can be refs, and subscriptions follow them.

@hibira-io/vuenpm ↗GitHub ↗

• useEvent, usePresence, useTrigger and useConnectionState, with one connection shared by every component.
• Safe with server rendering: nothing connects on the server.
• Works with Laravel Echo: pass its connection as the client.

Sign in to see these snippets with your own cluster host. Sign in

1. Install

   npm install @hibira-io/vue pusher-js

2. Set it up

   import { createApp } from 'vue';
   import { createHibira } from '@hibira-io/vue';
   
   createApp(App)
     .use(createHibira({
       appKey: import.meta.env.VITE_HIBIRA_KEY,
       options: {
         wsHost: 'ws.hibira.io',
         channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
       },
     }))
     .mount('#app');

3. Use it

   <script setup>
   import { ref } from 'vue';
   import { useEvent, usePresence } from '@hibira-io/vue';
   
   const orders = ref([]);
   useEvent('orders', 'order.created', (order) => orders.value.unshift(order));
   const { count } = usePresence('presence-dashboard');
   </script>

Before you start

• On the Free plan, list every origin your pages load from in the app’s allowed origins (http://localhost:3000 while developing, then your domain). "*" needs a paid plan.
• Private and presence channels need an auth endpoint on your backend that signs subscriptions with the app secret, as with pusher-js.

Use the app key from your dashboard; the secret stays on your server. Channels, events and authorization endpoints work exactly as they do with Pusher. Create your free account →