🔊 nuxt-use-sound

This module is a Nuxt implementation of the Vue composable @vueuse/sound.

For a better understanding of this module, you should check out the original composable page.

Setup

In order to use this module, you must have @nuxt/composition-api setup in your project.

Once you installed it, add nuxt-use-sound dependency to your project

yarn add --dev nuxt-use-sound
# or
npm i -D nuxt-use-sound

Add nuxt-use-sound to the modules section of nuxt.config.js

// nuxt.config.js
{
  buildModules: ['nuxt-use-sound']
}

Configure your sounds 🥁

// nuxt.config.js
{
  sound: {
    back: {
      src: "/back.wav",
      options: {
        volume: 0.25
      }
    }
  }
}

The rest of the documentation is available on the original composable repository.

Play your sounds, anywhere in your app.

Just note that no sound can be played before the user has clicked the page, this is a limitation from the Web Audio API.

<template>
  <button @click="$sounds.back.play">
    Boop! 🎺
  </button>
</template>

This package comes from @vueuse/sound, a package inspired by the React hook, useSound.

All the credit behind this idea goes to Josh W. Comeau.