---
title: "Props, events & methods"
description: "The Vue component API — props, emitted events, exposed methods, and slots."
canonical_url: "https://www.fftvisualizer.com/vue/props"
---
# Props, events & methods

> The Vue component API — props, emitted events, exposed methods, and slots.

## Props

The `<FFTVisualizer>` component accepts **every** [shared option](https://www.fftvisualizer.com/guide/options) as a prop,
one-to-one, in `camelCase` or `kebab-case`:

```vue
<FFTVisualizer
  mode="local"
  :bands="40"
  gradient="sunset"
  :led-bars="true"
  :smoothing="0.7"
/>
```

See [Options](https://www.fftvisualizer.com/guide/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:

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        showStats
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show the small connection/fps overlay (overridable via the <code>
        stats
      </code>
      
       slot)
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        connected
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Data source became active
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        disconnected
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Data source stopped
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Error message (WS error, capture failure, WebGL init failure)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        frame
      </code>
    </td>
    
    <td>
      <code>
        (data, left, right)
      </code>
    </td>
    
    <td>
      The display bar magnitudes, once per processed audio frame
    </td>
  </tr>
</tbody>
</table>

### 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.

```vue
<FFTVisualizer mode="local" :bands="28" @frame="onFrame" />
```

```ts
// 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:

```vue
<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

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Props
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        stats
      </code>
    </td>
    
    <td>
      <code>
        { connected, bands, fps }
      </code>
    </td>
    
    <td>
      Replace the default corner overlay with your own (only rendered when <code>
        showStats
      </code>
      
       is true)
    </td>
  </tr>
</tbody>
</table>


## Sitemap

See the full [sitemap](https://www.fftvisualizer.com/sitemap.md) for all pages.