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. Also available for Vue 2 at vue2-easter-egg-trigger.

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() {
  // ...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>

Options API

<script>
import { EasterEggTrigger } from 'vue3-easter-egg-trigger';

export default {
  components: {
    EasterEggTrigger,
  },
  data() {
    return {};
  },
  methods: {
    easterEggTriggered() {
      // ...do something
    },
  },
};
</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.