Spruce Up Your Vue.js App with Unexpected Delights Using the Easter Egg Trigger

Install & Download:

# NPM
$ npm install @wdns/vue-easter-egg-trigger
# PNPM
$ pnpm add @wdns/vue-easter-egg-trigger

Description:

The Vue Easter Egg Trigger component enables developers to assign hidden behaviors to specified keystroke combinations or mouse click events.

For example, inputting the Konami code (↑ ↑ ↓ ↓ ← → ← → b a) could trigger confetti or a sound effect.

How to use it:

1. Import and register the component.

// Global
import { createApp } from 'vue';
import App from './App.vue';
import { createVEasterEggTrigger } from '@wdns/vue-easter-egg-trigger';
const app = createApp(App);
app.use(createVEasterEggTrigger({
  // options
}));
app.mount('#app');

// OR 
import { createApp } from 'vue';
import App from './App.vue';
import { EasterEggTrigger, VEasterEggTrigger } from '@wdns/vue-easter-egg-trigger';
const app = createApp(App);
app.component('EasterEggTrigger', EasterEggTrigger);
app.component('VEasterEggTrigger', VEasterEggTrigger);
app.mount('#app');

// Local
<template>
  <VEasterEggTrigger @triggered="triggered('konami')" />
</template>
<script setup>
  import { EasterEggTrigger, VEasterEggTrigger } from '@wdns/vue-easter-egg-trigger';
</script>

2. Add the Easter Egg Trigger component to your app.

<template>
  <VEasterEggTrigger @triggered="easterEggTriggered" />
</template>

<script setup>
  function easterEggTriggered() {
    // ... do something
  }
</script>

3. All available component props.

delay: 500,
pattern: () => ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'],
persist: false,
target: 'body',
type: 'keydown',
callback: (settings: Props) => void

Preview: