vue-music-flow

Modern Vue 3 / Nuxt 3 audio player component with playlist and waveform visualization.

Documentation

GitHub Repository

Compatibility

vue-music-flow works with version Vue 3+ or Nuxt 3+

How to install

Recommended Node.js version is v22.x or higher

Vue 3

npm i vue-music-flow

Nuxt 3

npx nuxi module add nuxt-music-flow

How to use

Vue 3

Component.vue

<template>
  <MusicFlow
    :options="{
      autoplay: true,
    }"
  />
</template>

<script setup lang="ts">
import "vue-music-flow/dist/vue-music-flow.css";
import { MusicFlow } from "vue-music-flow";
</script>

Nuxt 3

Component.vue

<template>
  <MusicFlow
    :options="{
      autoplay: true,
    }"
  />
</template>

For more advanced customization visit documentation

Click here to visit documentation

Development

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

CSS scoping to avoid Tailwind collisions

The generated CSS is fully scoped to the library under the .vue-music-flow namespace so it won’t collide with your app’s Tailwind setup. The component already renders with this wrapper class, so you don’t need to add it manually. Just import vue-music-flow.css as shown above.

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Want to support my work?