@foleyjs/vue

Vue 3 bindings for Foley — sound effects for the interface, performed live.
2,403 110
vue plugin haptics directive ui sounds sound effects web audio interaction sounds audio feedback sound design microinteractions ui sound library sound set
Install
npm install @foleyjs/vue
Latest Version:2.9.0
Vue:3
License:MIT
Last Updated:Sep 16, 2026
Links: GitHub  ·  npm
Maintainer: gumbopot

@foleyjs/vue

Vue 3 bindings for Foley — sound effects for the interface, performed live.

npm install @foleyjs/core @foleyjs/vue

import { createApp } from "vue";
import { FoleyPlugin } from "@foleyjs/vue";

createApp(App).use(FoleyPlugin, { volume: 0.7, theme: "soft" }).mount("#app");

<button v-foley="'success'">Save</button>
<a v-foley:hover="'tick'">Docs</a>
<button v-foley:press="'thock'">Key</button>

The plugin registers the v-foley directive, applies your settings, and wires any data-foley-* attributes. Everything from @foleyjs/core is also re-exported.

Full documentation → · Live demo →

MIT © eakbulut and Foley contributors.

Related Packages

vue-aware

Optimized and easy way to manage events across Vue.js components.

1,511 6
directive plugin vue events vuejs
vue-intersection-plugin

a plugin

527 6
directive plugin vue intersection log
v-track

一个基于Vue指令的埋点插件

4,681 341
directive plugin vue javascript track vue-components
@sparing-software/v-clamp

Vue directive plugin for text truncate

3,655 15
directive plugin vue clamp nuxt text truncate
vue-long-press-directive

Long press directive plugin for Vue.js

2,448 10
directive plugin vue long mouse press touch

Version History

Version Released Vue License
2.9.0 >=3 MIT
2.8.1 >=3 MIT
2.8.0 >=3 MIT
2.7.0 >=3 MIT
2.6.1 >=3 MIT