Vue Hook For Playing Sound Effects – use-sound


use-sound is a lightweight Vue hook for playing sound effects on the app, based on Vue Composition API and Howler.js.

How to use it:

1. Import the use-sound hook and sound effect file as follows:

import useSound from 'vue-use-sound'
import buttonSfx from '/path/to/effect.mp3'
export default {
  setup() {
    const [play] = useSound(buttonSfx)
    return {

2. Enable a button to play the sound effect.

<button @click="play">Play a sound</button>

3. Available options.

export interface HookOptions {
  volume?: number
  playbackRate?: number
  interrupt?: boolean
  soundEnabled?: boolean
  sprite?: SpriteMap
  onload?: () => void
export interface PlayOptions {
  id?: number
  forceSoundEnabled?: boolean
  playbackRate?: number


Vue Hook For Playing Sound Effects - use-sound


v1.1.7 (02/20/2021)

  • package updated

v1.1.5 (02/20/2021)

  • package updated

v1.1.3 (02/07/2021)

  • package updated

v1.1.2 (01/13/2021)

  • fix howler typings

v1.1.0 (01/12/2021)

  • allow refs as volume & playbackRate parameters

v1.0.9 (01/10/2021)

  • remove optional chaining

v1.0.5 (01/03/2021)

  • update

v1.0.3 (01/02/2021)

  • remove unnecessary dependency

Download Details:

Author: vueuse

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add @vueuse/sound

$ npm i @vueuse/sound

You Might Be Interested In:


Add Comment