Vue
Props, events & methods
The Vue component API — props, emitted events, exposed methods, and slots.
Props
The <FFTVisualizer> component accepts every shared option as a prop,
one-to-one, in camelCase or kebab-case:
<FFTVisualizer
mode="local"
:bands="40"
gradient="sunset"
:led-bars="true"
:smoothing="0.7"
/>
See Options for the full list of names, types, defaults, and meanings.
Object/array props (data, dataLeft, dataRight, custom gradient stops) are bound with
:, e.g. :gradient="[{ stop: 0, color: '#001233' }, …]".
Vue-only prop
One prop exists only on the Vue wrapper, for its built-in overlay:
| Prop | Type | Default | Description |
|---|---|---|---|
showStats | boolean | true | Show the small connection/fps overlay (overridable via the stats slot) |
Events
| Event | Payload | Description |
|---|---|---|
connected | — | Data source became active |
disconnected | — | Data source stopped |
error | string | Error message (WS error, capture failure, WebGL init failure) |
frame | (data, left, right) | The display bar magnitudes, once per processed audio frame |
The frame event
Fires once per processed audio frame with the same 0–255 bar values the shader draws — a ready-made feed for external hardware (LED strips, flip-dot displays, …) without re-implementing any FFT. Listener-gated, so it costs nothing when unused.
<FFTVisualizer mode="local" :bands="28" @frame="onFrame" />
// data: Uint8Array — one 0–255 magnitude per bar (length = `bands`)
// left / right: per-channel arrays in stereo mode, else null
// (in stereo, `data` is the per-bar max of both channels)
function onFrame(data, left, right) {
const rows = 14 // e.g. dots per column on a flip-dot panel
data.forEach((v, col) => {
const lit = Math.round((v / 255) * rows)
// light dots 0..lit-1 in column `col`
})
}
Exposed methods
Access via a template ref:
<script setup>
import { ref } from 'vue'
const viz = ref()
// Manual connection control
viz.value.connect()
viz.value.disconnect()
viz.value.isConnected // Ref<boolean>
// Feed FFT frames imperatively (mode="external") — copies the data, so it works
// even when you reuse one buffer each frame (unlike the reference-watched `data` prop)
viz.value.feedData(mono) // Uint8Array
viz.value.feedData(mono, left, right) // stereo
// Local-audio device management
await viz.value.getAudioDevices() // Promise<AudioDevice[]> (prompts for mic permission)
viz.value.audioDevices // Ref<AudioDevice[]>
viz.value.activeAudioDeviceId // Ref<string | undefined>
</script>
<template>
<FFTVisualizer ref="viz" mode="local" />
</template>
Slots
| Slot | Props | Description |
|---|---|---|
stats | { connected, bands, fps } | Replace the default corner overlay with your own (only rendered when showStats is true) |