Official package · Frameworks

Nuxt module for realtime WebSockets

A module for Nuxt 4, 3 and 2: auto-imported composables in components, and a server client plus an auth route helper in server routes.

@hibira-io/nuxtnpm ↗GitHub ↗

• Composables are auto-imported; the connection opens in the browser only.
• useHibiraServer() in server routes publishes events and signs private and presence channels.
• Only the app key reaches the browser; the ID and secret stay in runtime config.

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

1. Install

   npx nuxi module add @hibira-io/nuxt

2. Set it up

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ['@hibira-io/nuxt'],
     hibira: {
       host: 'ws.hibira.io',
       authEndpoint: '/api/hibira/auth',
     },
   });
   
   // .env
   // NUXT_PUBLIC_HIBIRA_KEY=YOUR_APP_KEY
   // NUXT_HIBIRA_APP_ID=YOUR_APP_ID
   // NUXT_HIBIRA_SECRET=YOUR_APP_SECRET

3. Use it

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

Before you start

• The app secret is shown only once, when you create the app or rotate its secret. Keep it on your server, never in a browser or game build.
• 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.

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 →