Skip to content

e m o j i - b l a s t

Vue

@konami-emoji-blast/vue provides a Vue component and composable.

These act as convenience wrappers around konami-emoji-blast. You can always call konami-emoji-blast's functions directly instead.

First install the @konami-emoji-blast/vue package as a dependency:

Terminal window
npm i @konami-emoji-blast/vue

useKonamiEmojiBlast

Section titled “useKonamiEmojiBlast”

The preferred usage for Vue is with a provided useKonamiEmojiBlast composable. Call it in the setup of a root-level component in your app to call initializeKonamiEmojiBlast when the component is mounted. It will be cleaned up when the component is unmounted.

<script setup lang="ts">
import { useKonamiEmojiBlast } from "@konami-emoji-blast/vue";


useKonamiEmojiBlast();
</script>


<template>
  <main>Hello, world!</main>
</template>

Then, pressing the Konami Code on your Vue app should trigger fireworks blasts of emoji on the page. Yay! 🎆

useKonamiEmojiBlast Options

Section titled “useKonamiEmojiBlast Options”

useKonamiEmojiBlast may take a single optional parameter, onActivate.

onActivate

Section titled “onActivate”

A function to run whenever the user inputs the Konami Code.

<script setup lang="ts">
import { useKonamiEmojiBlast } from "@konami-emoji-blast/vue";


useKonamiEmojiBlast(() => {
  console.log("Commence blasting! 🎆");
});
</script>


<template>
  <main>Hello, world!</main>
</template>

KonamiEmojiBlast

Section titled “KonamiEmojiBlast”

If you'd rather use a component, a KonamiEmojiBlast component is provided too:

<script setup lang="ts">
import { KonamiEmojiBlast } from "@konami-emoji-blast/vue";
</script>


<template>
  <main>
    <KonamiEmojiBlast />
    Hello, world!
  </main>
</template>

It emits an activate event whenever the user inputs the Konami Code:

<script setup lang="ts">
import { KonamiEmojiBlast } from "@konami-emoji-blast/vue";


function onActivate() {
  console.log("Commence blasting! 🎆");
}
</script>


<template>
  <KonamiEmojiBlast @activate="onActivate" />
</template>