Docs/Client SDKs/Vue SDK

Vue SDK

@emitwave/vue — a Vue 3 plugin and composables layered over the browser client.

Client SDK· 5 min read

Install

bash

npm install @emitwave/vue @emitwave/js

Requires Vue 3.4+, @emitwave/js, a public application key, and an end-user token.

Install the plugin

Install the plugin once — it creates and connects a single shared client. Production URLs default to https://api.emitwave.com; override wsUrl, connectEndpoint, or authEndpoint only for other environments.

main.ts

// main.ts
import { createApp } from 'vue'
import { createEmitwave } from '@emitwave/vue'
import App from './App.vue'

const app = createApp(App)

app.use(createEmitwave({
  appKey: 'ew_pk_live_your_public_key',
  authHeaders: async () => ({
    Authorization: `Bearer ${await getEndUserToken()}`,
  }),
}))

app.mount('#app')

Connection state

status.ts

import { useConnection } from '@emitwave/vue'
const connection = useConnection() // reactive state string

useChannel

Subscribes when the client is ready and automatically unbinds and unsubscribes when the component scope is disposed.

Orders.vue

<script setup lang="ts">
import { useChannel } from '@emitwave/vue'

const { data, channel, error } = useChannel('orders', 'order.created')
</script>

<template>
  <pre v-if="data">{{ data }}</pre>
  <p v-if="error">{{ error.message }}</p>
</template>

useEvent

Observe every event on a channel rather than a single event name.

feed.ts

import { useEvent } from '@emitwave/vue'

const { last, error } = useEvent('orders')
// last.value is { event, data } after a publication arrives

usePresence

Room.vue

<script setup lang="ts">
import { usePresence } from '@emitwave/vue'

const { members, count, error } = usePresence('presence-room.lobby')
</script>

<template>
  <p>{{ count }} online</p>
  <ul>
    <li v-for="m in members" :key="m.id">{{ m.info?.name ?? m.id }}</li>
  </ul>
</template>

Without the plugin

Every composable accepts { client } for isolated modules and tests.

test.ts

const result = useChannel('orders', 'order.created', { client })

See the JavaScript SDK for callback registration, raw channel methods, and the complete token flow.

← Previous

Next.js

Node.js