Getting Started
Installation
Install the package and render your first spectrum in under a minute.
Install
pnpm add vue-fft-visualizer
npm install vue-fft-visualizer
yarn add vue-fft-visualizer
Quick start
The fastest way to see something is local mode — capture the microphone and visualize it entirely in the browser, no backend required:
<script setup>
import { FFTVisualizer } from 'vue-fft-visualizer'
</script>
<template>
<div class="viz">
<FFTVisualizer mode="local" :bands="40" gradient="aurora" />
</div>
</template>
<style>
/* The component fills its container — give it a height */
.viz { width: 100%; height: 240px; }
</style>
The browser prompts for microphone permission on mount. To capture tab or system audio
instead of the mic, set audio-source="display".
The component fills its container, so the wrapper needs a defined height.
Nuxt
The component is SSR-safe (all browser access is deferred to onMounted), but it renders
nothing meaningful on the server — wrap it in <ClientOnly>:
<ClientOnly>
<FFTVisualizer mode="local" />
</ClientOnly>