Hide Your Public Email behind a Simple Vue Component for Less Spam

Embedding your email address to public webite is a real solid way to start collecting spam to your inbox. From all the millions of dev outsourcing companies offering their next gen services to princes wanting so bad to send you money.

But, having your email available is a key to getting the right people hit you up.

To fool the bots but give humans access to the email I've created this simple Vue component.

It shows a fake fake email till you interact with it the link.

<script lang="ts" setup>
const hovered = ref(false)
const link = computed(() => (hovered.value ? 'real-email@example.org' : 'catch-spam@example.org'))
</script>

<template>
  <a :href="`mailto:${link}`" @mouseenter="hovered = true" @focus="hovered = true" @touchstart="hovered = true">
    <slot />
  </a>
</template>

Using it:

<template>
  <p>… you can hit me up by <email-link>Email</email-link> or …</p>
</template>

Simple-stupid solution eh 😏