{"id":14964251,"url":"https://github.com/justintaddei/v-wave","last_synced_at":"2025-04-13T19:32:32.850Z","repository":{"id":36990282,"uuid":"280991533","full_name":"justintaddei/v-wave","owner":"justintaddei","description":"The material-ripple directive for Vue that actually works","archived":false,"fork":false,"pushed_at":"2025-04-02T00:08:01.000Z","size":6673,"stargazers_count":402,"open_issues_count":1,"forks_count":16,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T17:06:39.527Z","etag":null,"topics":["material-design","micro-interactions","microinteractions","nuxtjs","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://justintaddei.github.io/v-wave/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justintaddei.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"buymeacoffee.com/justintaddei"}},"created_at":"2020-07-20T02:16:56.000Z","updated_at":"2025-04-02T00:07:57.000Z","dependencies_parsed_at":"2023-10-14T19:43:14.953Z","dependency_job_id":"625412de-1127-4793-8b29-0c48104d9879","html_url":"https://github.com/justintaddei/v-wave","commit_stats":{"total_commits":779,"total_committers":6,"mean_commits":"129.83333333333334","dds":0.2066752246469833,"last_synced_commit":"f1a2244e685cd6e53cae41182234a0ea8e77800a"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":"justintaddei/npm-ts-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintaddei%2Fv-wave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintaddei%2Fv-wave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintaddei%2Fv-wave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintaddei%2Fv-wave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justintaddei","download_url":"https://codeload.github.com/justintaddei/v-wave/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248767875,"owners_count":21158548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-design","micro-interactions","microinteractions","nuxtjs","vue","vuejs"],"created_at":"2024-09-24T13:32:52.340Z","updated_at":"2025-04-13T19:32:32.816Z","avatar_url":"https://github.com/justintaddei.png","language":"TypeScript","funding_links":["buymeacoffee.com/justintaddei"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/justintaddei/v-wave/assets/logo-small.png\"\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003ev-wave\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\nThe material-ripple directive for Vue that actually works\n\u003c/p\u003e\n\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/justintaddei/v-wave/main.yml?logo=github\u0026label=checks)\n![Vue Support](https://img.shields.io/badge/vue-2%20\u0026%203-1cb884.svg?style=flat)\n[![Issues](https://img.shields.io/github/issues-raw/justintaddei/v-wave.svg?style=flat)](https://github.com/justintaddei/v-wave/issues)\n![NPM version](https://img.shields.io/npm/v/v-wave.svg?style=flat)\n![Downloads per month](https://img.shields.io/npm/dm/v-wave.svg?style=flat)\n![Total downloads](https://img.shields.io/npm/dt/v-wave.svg?style=flat\u0026label=total+downloads)\n![Language](https://img.shields.io/badge/types-included-blue.svg?style=flat)\n![License](https://img.shields.io/npm/l/v-wave.svg?style=flat)\n\n\u003csub\u003eAlso available for React: [use-wave](https://github.com/justintaddei/use-wave)\u003c/sub\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\u003ch3 style=\"display:inline;\"\u003eWhy did I make this?\u003c/h3\u003e\u003c/summary\u003e\n\n\u003cbr /\u003eBecause every ripple plugin I've tried to use in the past either didn't work or was missing basic features.\n\n**Here's what you can expect from this plugin:**\n\n- It works ([see for yourself](https://justintaddei.github.io/v-wave)).\n- The wave appears on `pointerdown` instead of `pointerup`  \n  _(you might think that's an obvious choice... but you'd be wrong)._\n- The wave responds to keyboard events on keyboard-accessible elements (i.e. \u003ckbd\u003eEnter\u003c/kbd\u003e and \u003ckbd\u003eSpace\u003c/kbd\u003e on `\u003cbutton\u003e`).\n- There is a small delay before the ripple appears, during which the animation will be canceled if the user moves the pointer (e.g. scrolling on a mobile phone). This is similar to how native Android ripples work.\n- Uses CSS transforms instead of `width` and `height`.\n- Doesn't affect the appearance of the element you apply it to (won't explode when used on an element with `display: flex`).\n- Guesses the color of the wave automatically by default (using `currentColor`).\n- Works with fixed, absolute, relative, and statically positioned elements.\n- Will handle independent border-radii (e.g. `border-radius: 5px 20px 15px 30px`) perfectly fine.\n\n\u003c/details\u003e\n\n## [[Live Demo]](https://justintaddei.github.io/v-wave) \u003c!-- omit in toc --\u003e\n\n## Quick start \u003c!-- omit in toc --\u003e\n\nAfter installing and registering the plugin, this is all you need to get started:\n\n```html\n\u003cbutton v-wave\u003eClick here\u003c/button\u003e\n```\n\n![Example of default options](https://raw.githubusercontent.com/justintaddei/v-wave/assets/default-example.gif)\n\n\u003e Out of the box, this will provide you with a ripple that matches the text color of the element it has been applied to, with reasonable defaults for a responsive feeling ripple.  \n\u003e You can change the look and feel of the ripple on a [per-element basis](#configuring-locally), or by modifying the [global defaults](#configuring-globally).\n\n## Contents \u003c!-- omit in toc --\u003e\n\n- [Installation](#installation)\n  - [Via NPM](#via-npm)\n  - [Via CDN](#via-cdn)\n- [Configuration](#configuration)\n  - [Configuring globally](#configuring-globally)\n  - [Configuring locally](#configuring-locally)\n- [Options](#options)\n  - [Summary](#summary)\n  - [Details](#details)\n    - [color](#color)\n    - [initialOpacity](#initialopacity)\n    - [finalOpacity](#finalopacity)\n    - [duration](#duration)\n    - [dissolveDuration](#dissolveduration)\n    - [waitForRelease](#waitforrelease)\n    - [easing](#easing)\n    - [cancellationPeriod](#cancellationperiod)\n    - [trigger](#trigger)\n    - [disabled](#disabled)\n    - [respectDisabledAttribute](#respectdisabledattribute)\n    - [respectPrefersReducedMotion](#respectprefersreducedmotion)\n    - [stopPropagation](#stoppropagation)\n    - [tagName](#tagname)\n  - [Using triggers](#using-triggers)\n- [Advanced](#advanced)\n  - [Registering the directive locally](#registering-the-directive-locally)\n    - [Local registration with Composition API:](#local-registration-with-composition-api)\n    - [Local registration with Options API:](#local-registration-with-options-api)\n  - [Changing the directive's name](#changing-the-directives-name)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\n\u003csmall\u003eSee: [npm](#via-npm), [cdn](#via-cdn)\u003c/small\u003e\n\n### Via NPM\n\n\u003csmall\u003eSee: [Vue](#vue-), [Nuxt](#nuxt-)\u003c/small\u003e\n\n```sh\n$ npm i v-wave\n```\n\n#### Vue \u003c!-- omit in toc --\u003e\n\n```js\nimport { createApp } from 'vue'\nimport VWave from 'v-wave'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(VWave)\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003eVue 2\u003c/summary\u003e\n\n```js\n// Vue 2\n\nimport Vue from 'vue'\nimport VWave from 'v-wave'\n\nVue.use(VWave)\n```\n\n\u003c/details\u003e\n\nor\n\n#### Nuxt \u003c!-- omit in toc --\u003e\n\n```js\n// nuxt.config.js\n\n// Nuxt 3\nexport default {\n    modules: ['v-wave/nuxt']\n}\n\n// Nuxt 2\nexport default {\n    modules: ['v-wave/nuxt/v2']\n}\n```\n\n### Via CDN\n\n\u003cdetails\u003e\n    \u003csummary\u003eExpand examples\u003c/summary\u003e\n\n```html\n\u003cscript src=\"https://unpkg.com/v-wave\"\u003e\u003c/script\u003e\n```\n\n```js\n// With a CDN, `VWave` is made available as a global\nVue.use(VWave)\n```\n\n\u003c/details\u003e\n\n---\n\n## Configuration\n\n\u003csmall\u003eSee: [configuring globally](#configuring-globally), [configuring locally](#configuring-locally)\u003c/small\u003e\n\n### Configuring globally\n\n\u003csmall\u003eSee: [Vue](#vue--1), [Nuxt](#nuxt--1)\u003c/small\u003e\n\n#### Vue \u003c!-- omit in toc --\u003e\n\n```js\nimport { createApp } from 'vue'\nimport VWave from 'v-wave'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(VWave, {\n  color: 'red',\n  initialOpacity: 0.5,\n  easing: 'ease-in'\n})\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003eVue 2\u003c/summary\u003e\n\n```js\n// Vue 2\n\nimport Vue from 'vue'\nimport VWave from 'v-wave'\n\nVue.use(VWave, {\n  color: 'red',\n  initialOpacity: 0.5,\n  easing: 'ease-in'\n})\n```\n\n\u003c/details\u003e\n\nor\n\n#### Nuxt \u003c!-- omit in toc --\u003e\n\n```js\n// nuxt.config.js\n\nexport default {\n  modules: ['v-wave/nuxt'],\n  vWave: {\n    color: 'red',\n    initialOpacity: 0.5,\n    easing: 'ease-in'\n  }\n}\n```\n\n### Configuring locally\n\n```html\n\u003cbutton\n  v-wave=\"{\n    color: 'red',\n    initialOpacity: 0.5,\n    easing: 'ease-in',\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n---\n\n## Options\n\n\u003csmall\u003eSee: [summary](#summary), [details](#details)\u003c/small\u003e\n\n### Summary\n\n| Name                                                   |     Default      | Type                          |\n| ------------------------------------------------------ | :--------------: | ----------------------------- |\n| [color](#color)                                        | `\"currentColor\"` | `string`                      |\n| [initialOpacity](#initialopacity)                      |      `0.2`       | `number`                      |\n| [finalOpacity](#finalopacity)                          |      `0.1`       | `number`                      |\n| [duration](#duration)                                  |      `0.4`       | `number`                      |\n| [dissolveDuration](#dissolveduration)                  |      `0.15`      | `number`                      |\n| [waitForRelease](#waitforrelease)                      |      `true`      | `boolean`                     |\n| [easing](#easing)                                      |    `ease-out`    | `string`                      |\n| [cancellationPeriod](#cancellationperiod)              |       `75`       | `number`                      |\n| [trigger](#trigger)                                    |     `\"auto\"`     | `string \\| boolean \\| \"auto\"` |\n| [disabled](#disabled)                                  |     `false`      | `boolean`                     |\n| [respectDisabledAttribute](#respectdisabledattribute)  |      `true`      | `boolean`                     |\n| [respectPrefersReducedMotion](#respectpreferredmotion) |      `true`      | `boolean`                     |\n| [stopPropagation](#stoppropagation)                    |     `false`      | `boolean`                     |\n| [tagName](#tagname)                                    |     `\"div\"`      | `string`                      |\n\n### Details\n\n#### color\n\n- **type:** `string` ([`background` shorthand syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/background#formal_syntax))\n- _default:_ `\"currentColor\"`\n\n\u003e Sets the background of the ripple.  \n\u003e Supports any value that the CSS `background` property does.\n\n\u003cdetails\u003e\n    \u003csummary\u003eExpand examples\u003c/summary\u003e\n\n\u003csmall\u003eSee: [color](#simple-color-), [gradient](#gradient-), [image](#image-)\u003c/small\u003e\n\n#### Simple color \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    color: 'red',\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/color-red.gif)\n\n#### Gradient \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    color: 'radial-gradient(closest-side, #fff, #00f, #fff)',\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/color-gradient.gif)\n\n#### Image \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    color: 'no-repeat url(https://...) 0 0 / cover',\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/color-image.gif)\n\n\u003c/details\u003e\n\n#### initialOpacity\n\n- **type:** `number`\n- _default:_ `0.2`\n\n\u003e The opacity of the ripple when it first appears.\n\n\u003cdetails\u003e\n    \u003csummary\u003eExpand examples\u003c/summary\u003e\n\n\u003csmall\u003eSee: [initialOpacity: 1](#initialopacity-of-1-), [initialOpacity: 0](#initialopacity-of-0-)\u003c/small\u003e\n\n#### initialOpacity of 1 \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    initialOpacity: 1,\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/color-initial-opacity-1.gif)\n\n#### initialOpacity of 0 \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    initialOpacity: 0,\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/color-initial-opacity-0.gif)\n\n\u003c/details\u003e\n\n#### finalOpacity\n\n- **type:** `number`\n- _default:_ `0.1`\n\n\u003e The opacity the ripple should be when it has stopped moving.\n\n\u003cdetails\u003e\n    \u003csummary\u003eExpand examples\u003c/summary\u003e\n\n\u003csmall\u003eSee: [finalOpacity: 1](#finalopacity-of-1-), [finalOpacity: 0](#finalopacity-of-0-)\u003c/small\u003e\n\n#### finalOpacity of 1 \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    finalOpacity: 1,\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/color-final-opacity-1.gif)\n\n#### finalOpacity of 0 \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    finalOpacity: 0,\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/color-final-opacity-0.gif)\n\n\u003c/details\u003e\n\n#### duration\n\n- **type:** `number` (seconds)\n- _default:_ `0.4`\n\n\u003e The duration of the ripple in seconds.  \n\u003e The total duration is `duration + dissolveDuration`\n\n\u003cdetails\u003e\n    \u003csummary\u003eExpand example\u003c/summary\u003e\n\n#### duration of 3 seconds \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    duration: 3,\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/duration-3s.gif)\n\n\u003c/details\u003e\n\n#### dissolveDuration\n\n- **type:** `number` (seconds)\n- _default:_ `0.15`\n\n\u003e The duration of the \"dissolve animation\" in seconds.  \n\u003e This is the fade-out animation that plays once the wave has reached its maximum size.  \n\u003e The total duration is `duration + dissolveDuration`\n\n\u003cdetails\u003e\n    \u003csummary\u003eExpand example\u003c/summary\u003e\n\n#### dissolve duration of 3 seconds \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    dissolveDuration: 3,\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/dissolve-duration-3s.gif)\n\n\u003c/details\u003e\n\n#### waitForRelease\n\n- **type:** `boolean`\n- _default:_ `true`\n\n\u003e When `true`, the wave will not dissolve until the user releases the pointer.\n\n#### easing\n\n- **type:** `string` ([`\u003ceasing-function\u003e`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function))\n- _default:_ `\"ease-out\"`\n\n\u003e Any valid CSS `\u003ceasing-function\u003e` ([see more](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function))\n\n\u003cdetails\u003e\n    \u003csummary\u003eExpand example\u003c/summary\u003e\n\n#### cubic-bezier \u003c!-- omit in toc --\u003e\n\n```html\n\u003cbutton\n  v-wave=\"{\n    easing: 'cubic-bezier(0,.57,.89,0)',\n}\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/easing.gif)\n\n\u003c/details\u003e\n\n#### cancellationPeriod\n\n- **type:** `number` (milliseconds)\n- _default:_ `75`\n\n\u003e The delay, in milliseconds, during which the animation will be canceled if the user moves their figure/pointer (e.g. while scrolling on a mobile device).\n\n\u003e **Note:** The ripple will not appear until after the delay. This means a delay greater than 100ms can feel sluggish.\n\n#### trigger\n\n- **type:** `\"auto\" | string | boolean`\n- _default:_ `\"auto\"`\n\n\u003e Sets the behavior of the wave when used with triggers. (See the [dedicated section](#using-triggers) on triggers for more details).\n\n- `false`  \n   Disables the use of triggers. If a `v-wave-trigger` (without an ID) is present in the dom tree of this element, it will be ignored (i.e. `v-wave` always behaves as if there's no trigger).\n- `true`  \n   Requires a trigger to activate the ripple. `v-wave` assumes the presence of a `v-wave-trigger` (without an ID) in its dom tree. The ripple will only activate for `pointerdown` events on the trigger element.\n- `\"auto\"`  \n   If a `v-wave-trigger` (without an ID) is present in the dom-tree of the v-wave element, it behaves as `trigger: true`, otherwise it behaves as `trigger: false`.\n- `string`  \n   Any string other than `\"auto\"` will be treated as an ID. `v-wave` will only activate when a `v-wave-trigger` with a matching ID receives a `pointerdown` event.\n\n  \u003e This is different from the other values as it allows you to place the trigger element anywhere in the dom, while the others require the trigger to be a descendant.\n\n\u003cdetails\u003e\n    \u003csummary\u003eExpand example\u003c/summary\u003e\n\n#### basic trigger \u003c!-- omit in toc --\u003e\n\n```html\n\u003clabel v-wave\u003e\n  \u003cinput type=\"text\" placeholder=\"Search\" /\u003e\n\n  \u003c!-- Only show the wave when the trigger is clicked --\u003e\n  \u003cimg v-wave-trigger src=\"search.svg\" /\u003e\n\u003c/label\u003e\n```\n\n![](https://raw.githubusercontent.com/justintaddei/v-wave/assets/tigger.gif)\n\n\u003c/details\u003e\n\n#### disabled\n\n- **type:** `boolean`\n- _default:_ `false`\n\n\u003e Disables the wave effect on the element regardless of [`respectDisabledAttribute`](#respectdisabledattribute).\n\n#### respectDisabledAttribute\n\n- **type:** `boolean`\n- _default:_ `true`\n\n\u003e When `true`, the wave effect will be disabled if the html `disabled` attribute is present on the element.\n\n```html\n\u003c!-- The wave will *not* appear on this button --\u003e\n\u003cbutton v-wave disabled\u003eClick me!\u003c/button\u003e\n\u003c!-- The wave *will* appear on this button --\u003e\n\u003cbutton v-wave=\"{respectDisabledAttribute: false}\" disabled\u003eClick me!\u003c/button\u003e\n```\n\n#### respectPrefersReducedMotion \n\n- **type:** `boolean`\n- _default:_ `true`\n\n\u003e If `true`, the wave effect will be disabled if the user's [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) preference is set to `reduce`.\n\n#### stopPropagation\n\n- **type:** `boolean`\n- _default:_ `false`\n\n\u003e Prevents the `pointerdown` event from propagating to parent elements.\n\n#### tagName\n\n- **type:** `string`\n- _default:_ `\"div\"`\n\n\u003e Sets the tag name of the element used as the wave container. This is is useful in scenarios where the default `div` may interfere with `:last-of-type` or similar selectors.\n\n---\n\n### Using triggers\n\nTriggers allow you to activate a wave on an element when, and only when, a different element receives input.\n\nIn the following example, the wave will only activate for the label element when the user clicks or taps on the `\u003cimg/\u003e`.\n\n```html\n\u003clabel v-wave\u003e\n  \u003cspan\u003ePassword\u003c/span\u003e\n  \u003cinput :type=\"showPassword ? 'text' : 'password'\" /\u003e\n  \u003cimg v-wave-trigger src=\"eye.svg\" @click=\"() =\u003e showPassword = !showPassword\" /\u003e\n\u003c/label\u003e\n```\n\nIn this next example, clicking one of the buttons will activate the wave on the other button.\n\n```html\n\u003cbutton v-wave=\"{trigger: 'button2'}\" v-wave-trigger:button1\u003eButton 1\u003c/button\u003e\n\n\u003cbutton v-wave=\"{trigger: 'button1'}\" v-wave-trigger:button2\u003eButton 2\u003c/button\u003e\n```\n\n\u003e Triggers that use an ID support many-to-many relationships. See the grid example on the [example page](https://justintaddei.github.io/v-wave).\n\n## Advanced\n\n### Registering the directive locally\n\n#### Local registration with Composition API:\n\n```html\n\u003cscript\u003e\n  import VWave from 'v-wave'\n  const { vWave, vWaveTrigger } = VWave.createLocalWaveDirective({\n    /* global options */\n  })\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton v-wave\u003eClick me!\u003c/button\u003e\n\u003c/template\u003e\n```\n\n#### Local registration with Options API:\n\n```html\n\u003cscript\u003e\n  import VWave from 'v-wave'\n  const { wave, waveTrigger } = VWave.createLocalWaveDirective({\n    /* global options */\n  })\n\n  export default {\n    directives: {\n      wave,\n      waveTrigger\n    }\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton v-wave\u003eClick me!\u003c/button\u003e\n\u003c/template\u003e\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003eVue 2\u003c/summary\u003e\n\nIf you are using Vue 2, you need to pass `\"vue2\"` as the second argument to `createLocalWaveDirective`\n\n```html\n\u003cscript\u003e\n  import VWave from 'v-wave'\n  const { wave, waveTrigger } = VWave.createLocalWaveDirective(\n    {\n      /* global options */\n    },\n    'vue2'\n  ) // this is the difference\n\n  export default {\n    directives: {\n      wave,\n      waveTrigger\n    }\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton v-wave\u003eClick me!\u003c/button\u003e\n\u003c/template\u003e\n```\n\n\u003c/details\u003e\n\n### Changing the directive's name\n\nIf you are migrating from another ripple directive you can change the name of the directive v-wave uses if you want to avoid changing it in your source code.  \nSimply pass a new name for the directive using the `directive` option:\n\n```js\n//main.js\n\nimport Vue from 'vue'\nimport VWave from 'v-wave'\n\nVue.use(VWave, {\n  directive: 'ripple'\n})\n```\n\nNow you can use the plugin like so:\n\n```html\n\u003cbutton v-ripple\u003eClick me!\u003c/button\u003e\n```\n\n\u003e Keep in mind that this option can only be set globally (i.e. it cannot be set on individual directives).\n\n## Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](https://github.com/justintaddei/v-wave/blob/master/CONTRIBUTING.md) for more details.\n\n## License\n\nThis project is distributed under the [MIT License](https://github.com/justintaddei/v-wave/blob/master/LICENSE.md).\n\n### The MIT License (MIT) \u003c!-- omit in toc --\u003e\n\nCopyright (c) 2021 Justin Taddei\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustintaddei%2Fv-wave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustintaddei%2Fv-wave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustintaddei%2Fv-wave/lists"}