Skip to main content

Vue Integration

Add real-time WebSocket features to your Vue 3 app using the @sukko/vue package.

Time to complete

~10 minutes

Install​

npm install @sukko/sdk @sukko/websocket @sukko/vue

Setup Plugin​

Register the Sukko plugin, passing options (a SukkoClientOptions) for the plugin to create the client, or a pre-built client:

// src/main.ts
import { createApp } from 'vue';
import { createSukkoPlugin } from '@sukko/vue';
import { WebSocketTransport } from '@sukko/websocket';
import App from './App.vue';

const app = createApp(App);

app.use(createSukkoPlugin({
  options: {
    transport: new WebSocketTransport({ url: 'ws://localhost:3000' }),
    getToken: async () => {
      const res = await fetch('/api/auth/sukko-token');
      return res.text();
    },
  },
}));

app.mount('#app');

The plugin creates the client during app.use(), so it connects immediately (it has no component lifecycle to defer to). For SSR (Nuxt), pass options.autoConnect: false so it doesn't open a connection on the server, and connect client-side once mounted.

Subscribe to a Channel​

useSubscription takes an array of channels (a ref or getter works too) and exposes the latest message as reactive refs (lastMessage, data). Accumulate a list with onMessage:

<script setup lang="ts">
import { ref } from 'vue';
import { useSubscription, type TypedMessage } from '@sukko/vue';

const messages = ref<TypedMessage[]>([]);

useSubscription({
  channels: ['general.chat'],
  onMessage: (msg) => messages.value.push(msg),
});
</script>

<template>
  <ul>
    <li v-for="(msg, i) in messages" :key="i">
      {{ JSON.stringify(msg.data) }}
    </li>
  </ul>
</template>

For a single latest-value view, read data directly:

<script setup lang="ts">
import { useSubscription } from '@sukko/vue';

const { data } = useSubscription<Trade>({ channels: ['tenant.BTC.trade'] });
</script>

<template>
  <span>Last price: {{ data?.price }}</span>
</template>

Publish a Message​

<script setup lang="ts">
import { useSukkoClient } from '@sukko/vue';

const client = useSukkoClient();
</script>

<template>
  <button @click="client.publish('general.chat', { text: 'Hello from Vue!' })">
    Send
  </button>
</template>

Connection State​

useConnectionState returns reactive refs; state auto-unwraps in the template:

<script setup lang="ts">
import { useConnectionState } from '@sukko/vue';

const { state, isConnected, isReconnecting } = useConnectionState();
</script>

<template>
  <span>Status: {{ state }}</span>
</template>

Next Steps​