The vue3-easter-egg-trigger component makes it nice and easy to add Easter Egg triggers to your Vue site. Also available for Vue 2 at vue2-easter-egg-trigger.
pnpm add vue3-easter-egg-trigger npm i vue3-easter-egg-trigger import { createApp } from 'vue'; import EasterEggTrigger from 'vue3-easter-egg-trigger'; createApp() .use(EasterEggTrigger) .mount('#app');import { createApp } from 'vue'; import EasterEggTrigger from 'vue3-easter-egg-trigger'; createApp() .component('EasterEggTrigger', EasterEggTrigger) .mount('#app');<script setup> import { EasterEggTrigger } from 'vue3-easter-egg-trigger'; function easterEggTriggered() { // ...do something } </script> <template> <EasterEggTrigger @triggered="easterEggTriggered" /> </template><script> import { EasterEggTrigger } from 'vue3-easter-egg-trigger'; export default { components: { EasterEggTrigger, }, setup() { function easterEggTriggered() { // ...do something } return { easterEggTriggered, }; }, }; </script> <template> <EasterEggTrigger @triggered="easterEggTriggered" /> </template><script> import { EasterEggTrigger } from 'vue3-easter-egg-trigger'; export default { components: { EasterEggTrigger, }, data() { return {}; }, methods: { easterEggTriggered() { // ...do something }, }, }; </script> <template> <EasterEggTrigger @triggered="easterEggTriggered" /> </template>;See it in action on the Demo Page
| Name | Type | Default | Description |
|---|---|---|---|
| callback | Function | null | The callback function |
| delay | String, Integer | 500 | Determines the timeout before the event listener resets. The longer the delay, the more time a user has to complete the pattern. |
| pattern | Array | ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'] | The key/click combination a user does to trigger easter egg. The default combination is the konami code. |
| target | String | body | Use this to target DOM elements, Id's, or Class Names. Used with click events. |
| type | String | keydown | The type of action the trigger will be listening for. Available options: keydown, keyup, click, dblclick, mouseup, mousedown |
| Name | Type | Description |
|---|---|---|
| triggered | [MouseEvent, KeyboardEvent] | Emitted when the easter egg is triggered. |
The default key combination to trigger the easter egg is the Konami Code.
ex. ↑ ↑ ↓ ↓ ← → ← → b a
<EasterEggTrigger @triggered="easterEggTriggered" /><EasterEggTrigger :pattern="['m', 'a', 'g', 'i', 'c']" @triggered="easterEggTriggered" /><EasterEggTrigger delay="5000" @triggered="easterEggTriggered" /><EasterEggTrigger :callback="easterEggTriggered" />First you will need to set the type prop.
Available types of Mouse Events: click, dblclick, mouseup, mousedown. When using dblclick the pattern will only work with one double click. Ex. pattern: ['dblclick']
<EasterEggTrigger :pattern="['click']" target="#id-target" type="click" @triggered="easterEggTriggered" /><EasterEggTrigger :pattern="['click', 'click']" target="#id-target" type="click" @triggered="easterEggTriggered" /><EasterEggTrigger :pattern="['click']" target="h1" type="click" @triggered="easterEggTriggered" /><EasterEggTrigger :pattern="['click']" target="#id-target" type="click" @triggered="easterEggTriggered" /><EasterEggTrigger :pattern="['click']" target=".double-click-target" type="click" @triggered="easterEggTriggered" />Copyright (c) 2022 WebDevNerdStuff Licensed under the MIT license.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}