Vue 3 Easter Egg Trigger
Description
The vue3-easter-egg-trigger
component makes it nice and easy to add Easter Egg triggers to your Vue site.
Installation
pnpm
pnpm add vue3-easter-egg-trigger
npm
npm i vue3-easter-egg-trigger
Register
As Plugin (Global)
import { createApp } from 'vue';
import EasterEggTrigger from 'vue3-easter-egg-trigger';
createApp()
.use(EasterEggTrigger)
.mount('#app');
As Component (Global)
import { createApp } from 'vue';
import EasterEggTrigger from 'vue3-easter-egg-trigger';
createApp()
.component('EasterEggTrigger', EasterEggTrigger)
.mount('#app');
As Component (Local)
Composition API
<script setup>
import { EasterEggTrigger } from 'vue3-easter-egg-trigger';
function easterEggTriggered() {
}
</script>
<template>
<EasterEggTrigger @triggered="easterEggTriggered" />
</template>
<script>
import { EasterEggTrigger } from 'vue3-easter-egg-trigger';
export default {
components: {
EasterEggTrigger,
},
setup() {
function easterEggTriggered() {
}
return {
easterEggTriggered,
};
},
};
</script>
<template>
<EasterEggTrigger @triggered="easterEggTriggered" />
</template>
Options API
<script>
import { EasterEggTrigger } from 'vue3-easter-egg-trigger';
export default {
components: {
EasterEggTrigger,
},
data() {
return {};
},
methods: {
easterEggTriggered() {
},
},
};
</script>
<template>
<EasterEggTrigger @triggered="easterEggTriggered" />
</template>;
Usage
Demo
See it in action on the Demo Page
Plugin Props
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 |
Events
Name | Type | Description |
---|
triggered | [MouseEvent, KeyboardEvent] | Emitted when the easter egg is triggered. |
Keyboard Event Examples
The default key combination to trigger the easter egg is the Konami Code.
ex. ↑ ↑ ↓ ↓ ← → ← → b a
Bare Egg Example.
<EasterEggTrigger @triggered="easterEggTriggered" />
Custom Pattern
<EasterEggTrigger
:pattern="['m', 'a', 'g', 'i', 'c']"
@triggered="easterEggTriggered"
/>
Delay (longer time to complete pattern)
<EasterEggTrigger
delay="5000"
@triggered="easterEggTriggered"
/>
Callback
<EasterEggTrigger :callback="easterEggTriggered" />
Mouse Event Examples
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"
/>
Multiple clicks required
<EasterEggTrigger
:pattern="['click', 'click']"
target="#id-target"
type="click"
@triggered="easterEggTriggered"
/>
DOM element target
<EasterEggTrigger
:pattern="['click']"
target="h1"
type="click"
@triggered="easterEggTriggered"
/>
ID target
<EasterEggTrigger
:pattern="['click']"
target="#id-target"
type="click"
@triggered="easterEggTriggered"
/>
Class target
<EasterEggTrigger
:pattern="['click']"
target=".double-click-target"
type="click"
@triggered="easterEggTriggered"
/>
Change Log
CHANGELOG
License
Copyright (c) 2022 WebDevNerdStuff
Licensed under the MIT license.