---
title: "Installation"
description: "Install the package and render your first spectrum in under a minute."
canonical_url: "https://www.fftvisualizer.com/vue/installation"
---
# Installation

> Install the package and render your first spectrum in under a minute.

Prefer to poke at it first? The [live playground](https://demo.fftvisualizer.com/vue/)
runs this exact package with every option exposed.

## Install

<code-group>

```bash [pnpm]
pnpm add @fft-visualizer/vue
```

```bash [npm]
npm install @fft-visualizer/vue
```

```bash [yarn]
yarn add @fft-visualizer/vue
```

</code-group>

Import the stylesheet once, anywhere in your app — it sizes the canvas and styles the stats
overlay:

```ts
import '@fft-visualizer/vue/style.css'
```

## Quick start

The fastest way to see something is **local mode** — capture the microphone and visualize
it entirely in the browser, no backend required:

```vue
<script setup>
import { FFTVisualizer } from '@fft-visualizer/vue'
</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"`.

<note>

The component fills its container, so the wrapper needs a defined height.

</note>

## 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>`:

```vue
<ClientOnly>
  <FFTVisualizer mode="local" />
</ClientOnly>
```

See [Nuxt](https://www.fftvisualizer.com/vue/nuxt) for the stylesheet, layout shift, and using the core directly.

<note>

`mode="local"` is one of three [data modes](https://www.fftvisualizer.com/guide/data-modes). Every prop maps to a shared
[option](https://www.fftvisualizer.com/guide/options); see [Props, events & methods](https://www.fftvisualizer.com/vue/props) for the Vue-specific API.

</note>


## Sitemap

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