Packages
Vue Composables
Streamer.bot Client composition functions for Vue.js
Streamer.bot client comes with the useStreamerbot() composition function, ready for usage with Vue.js!
Installation
Import the @streamerbot/vue package
pnpm install @streamerbot/vue
useStreamerbot
useStreamerbot(options: MaybeRefs<StreamerbotClientOptions>): UseStreamerbotReturn
Options
All regular client Configuration Options are supported as raw values or refs.
Returned State
Return Type
const {
client,
status,
data,
error,
connect,
disconnect
} = useStreamerbot();
client
Ref<StreamerbotClient>
Ref access to the generated StreamerbotClient instance.
status
Ref<'OPEN' | 'CONNECTING' | 'CLOSED'>
The current WebSocket connection state.
- Default:
Ref<'CLOSED'> - Example:
const isConnected = computed(() => status.value === 'OPEN')
data
Ref<any>
Ref containing all data received by the client. Useful for usage with Vue watch function.
- Default:
Ref<undefined> - Example:
watch(data, (val) => { console.log('New data received:' val) })
error
Ref<string>
Ref access to WebSocket error states
- Default:
Ref<undefined>
connect
() => void
Easily call connect() on the Streamer.bot Client instance
disconnect
() => void
Easily call disconnect() on the Streamer.bot Client instance
Example Usage
MyComponent.vue
<script setup lang="ts">
import { watch } from 'vue';
import { useStreamerbot } from '@streamerbot/vue';
// Connect automatically with default host/port, subscribing to all events
const { client, status, data } = useStreamerbot({
subscribe: '*'
});
// Watch the data ref for new events
watch(data, (val) => {
console.log('New data from Streamer.bot!', val);
});
</script>
<template>
<pre><code>{{ data }}</code></pre>
</template>