How to safely share email in Nuxt

up:: Nuxt Snippets

Overview

This approach encodes the email in a base64 string and decodes it on mount. Adapted from How to Safely Share Your Email Address on a Website | CSS-Tricks - CSS-Tricks.

Dependencies

Base64 Encode and Decode - Online

Snippet

<script>
const encrypted = {
	email: "aGlAam9zY2h1YS5pbw==",
	text: "E-Mail is protected",
}
 
const decrypted = {
	email: () => atob(encrpyted.email),
	text: "E-Mail",
}
 
onMounted(() => {
  const mail = document.getElementById("email");
  mail.setAttribute("href", "mailto:".concat(decrypted.email()));
  mail.innerText = decrypted.text;
});
</script>
 
<template>
<nuxt-link :to="encrypted.email">{{ encrypted.text }}</nuxt-link>
</template>