How do I use WebSockets in Vue 3?

Use the onMounted lifecycle hook to open a WebSocket connection and subscribe to a channel. Bind events to reactive refs or reactive arrays so your template updates automatically. Call disconnect() in onUnmounted for cleanup.

Does Apinator work with Nuxt 3?

Yes. Use the client SDK inside onMounted or wrap your component with to ensure the WebSocket code only runs in the browser. Server-side rendering does not support persistent WebSocket connections.

Can I use Apinator WebSocket channels with Pinia?

Yes. Inside a channel.bind() handler, dispatch a Pinia action or mutate store state directly. The WebSocket event triggers the action, and any components observing that state update automatically.

Does Vue have built-in WebSocket support?

Vue has no built-in WebSocket API. You use the browser native WebSocket or a library like Apinator. Apinator adds channel abstractions, presence, private channel auth, and auto-reconnect on top of the raw WebSocket.

Is it free to add WebSocket notifications to a Vue app?

Yes. Apinator has a free plan with no credit card required. You can add WebSocket channels and real-time notifications to your Vue or Nuxt app at no cost.

Client SDK

Realtime WebSocket Notifications for Vue.js

Add WebSocket channels and real-time notifications to Vue 3 and Nuxt apps. Composable-friendly SDK that pairs naturally with reactive refs, onMounted, and onUnmounted lifecycle hooks.

Get Started Free View Docs

Client $ npm install @apinator/client

Adding real-time WebSocket events to a Vue 3 application is clean and idiomatic with Apinator's composable-friendly client SDK. Open a persistent WebSocket connection in onMounted, bind events to reactive refs so templates update automatically, and disconnect in onUnmounted. Works with Vue 3 Composition API, Nuxt 3, and Pinia stores.

Quick Start

How to add WebSocket notifications to Vue 3

Add realtime features to your Vue.js app in a few steps.

Install the client SDK

Add the client SDK to your Vue project. Works with Vue 3 and Nuxt.

npm install @apinator/client

Create a client instance

Initialize the client with your app key. Set an auth endpoint for private channels.

// lib/realtime.ts
import { Apinator } from '@apinator/client'

export const client = new Apinator({
  appKey: import.meta.env.VITE_REALTIME_KEY,
  cluster: 'us',
  authEndpoint: '/api/realtime/auth'
})

Subscribe to a WebSocket channel

Create a composable that opens a persistent WebSocket connection, subscribes to a channel, and exposes reactive data.

import { ref, onMounted, onUnmounted } from 'vue'
import { client } from './lib/realtime'

export function useChannel(name: string) {
  const messages = ref([])

  onMounted(() => {
    const ch = client.connect().subscribe(name)
    ch.bind('message', (d) => messages.value.push(JSON.parse(d)))
  })

  onUnmounted(() => { client.disconnect() })
  return { messages }
}

Use in a component

Call the composable in your component. Messages are reactive and update the template automatically.

<script setup>
import { useChannel } from './composables/useChannel'
const { messages } = useChannel('chat-room')
script>

Why Vue.js

Built for Vue.js developers

Composition API Ready

Designed for Vue 3 Composition API. Create reusable composables with onMounted/onUnmounted lifecycle hooks.

Reactive Data

Bind channel events to Vue refs. Template updates automatically when new messages arrive.

Nuxt Compatible

Works with Nuxt 3 out of the box. Use in client-only components or with ClientOnly wrapper.

Auto-Reconnect

Built-in exponential backoff reconnection keeps your Vue app connected through network changes.

How WebSocket channels work with Vue 3 Composition API

Vue 3's Composition API maps naturally to WebSocket subscriptions. The onMounted and onUnmounted lifecycle hooks correspond exactly to opening and closing a WebSocket connection, and Vue's reactive refs automatically propagate incoming events to your templates without any manual DOM manipulation.

The recommended pattern is a useChannel() composable that encapsulates the WebSocket subscription, exposes reactive state, and handles cleanup automatically when the component is destroyed. This makes the WebSocket logic reusable across multiple components while keeping your component scripts clean. Because Apinator maintains a single underlying WebSocket connection shared across all subscriptions, calling useChannel() from many components simultaneously is efficient.

For Nuxt 3, the client SDK should run only in client-side code — either inside onMounted or in a component wrapped with <ClientOnly>. Server-side rendering doesn't support persistent WebSocket connections. Apinator's server SDK handles the publish side from Nuxt's server routes and API handlers.

Full Example

Full Example: Realtime WebSocket Chat with Vue 3 Composable

Complete WebSocket example: a reusable useChannel composable and a chat component that displays real-time messages via reactive refs.

composables/useChannel.ts

import { ref, onMounted, onUnmounted } from 'vue' import { Apinator } from '@apinator/client' import type { Ref } from 'vue' const client = new Apinator({ appKey: import.meta.env.VITE_REALTIME_KEY, cluster: 'us', authEndpoint: '/api/realtime/auth' }) export function useChannel<T>(channelName: string, event: string): Ref<T[]> { const items = ref<T[]>([]) as Ref<T[]> onMounted(() => { const channel = client.connect().subscribe(channelName) channel.bind(event, (data: string) => { items.value.push(JSON.parse(data)) }) }) onUnmounted(() => { client.disconnect() }) return items }

Related Docs

Read the core WebSocket guides

Related Use Cases

Explore realtime use cases

Live Chat & Messaging Live Notifications & Activity Feeds Live Dashboards & Analytics

Start building realtime Vue.js apps

Completely free. No credit card. No catch.

Get Started Free Read the Docs