vue-ripple-directive is a lightweight Vue.js directive that implements the Material Design ripple effect on any HTML element. Currently stable at version 2.0.1, the package provides a focused solution for adding interactive visual feedback to user interface elements, differentiating itself from larger component libraries by offering only the ripple functionality. Releases have historically addressed bug fixes and introduced features like custom colors and event modifiers, though recent development pace appears moderate. A key characteristic is its reliance on the host element having `position: relative` for accurate ripple positioning, a behavior that was explicitly enforced as a breaking change in version 2.0.1. It can be configured globally for default colors and z-index.
npm install vue-ripple-directiveVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to import, globally configure, and register the `v-ripple` directive in a Vue 3 application. It then shows its usage in a template with default behavior, a custom color parameter, and event/transition modifiers, emphasizing the essential `position: relative` CSS requirement.
Explicitly add `position: relative;` to the CSS rules for all elements that use `v-ripple`. Also, ensure `overflow: hidden;` is applied to clip the ripple within the element's bounds.
Ensure you are using a recent version of the directive (2.0.x recommended). If targeting older browsers or environments, ensure your project's build pipeline (e.g., Babel) is correctly transpiling node_modules or specifically `vue-ripple-directive`.
Add `position: relative;` and `overflow: hidden;` to the CSS class or style attribute of the element where `v-ripple` is used.
For Vue 3, ensure you `import { createApp } from 'vue'` and use `app.directive('ripple', Ripple)`. For Vue 2, ensure `import Vue from 'vue'` and use `Vue.directive('ripple', Ripple)`.