Nuxt-protected-mailto NPM

nuxt-protected-mailto

This module tries to protect email-addresses in your Nuxt SSG / SSR project from spam bots without sacrificing usability. The HTML output of the mail gets encoded to HTML Unicode Entities. Mailto: Links will be handled by javascript instead of a href="mailto:test@example.com".

Demo

📖 Release Notes

Setup

Add nuxt-protected-mailto dependency to your project

yarn add nuxt-protected-mailto # or npm install nuxt-protected-mailto

Add nuxt-protected-mailto to the modules section of nuxt.config.js

{
  modules: [
    'nuxt-protected-mailto',
  ]
}

Set build.html.minify.decodeEntities = false in nuxt.config.js

{
  build: {
    html: {
      minify: {
        decodeEntities: false
      }
    }
  }
}

Use the global Mailto Component With the Email as output.

<Mailto mail="test@example.com" subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email" />

With Caption

<Mailto mail="test@example.com" subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email">
  Button Caption
</Mailto>

For multiple recipients

<Mailto mail="test@example.com, test2@example.com" subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email" />

<!-- OR -->

<Mailto :mail="['test@example.com', 'test2@example.com']" subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email" />

What it does

It encodes the email address by hiding it behind a click event when the Mailto component is used. When the link is clicked, a mailto: url is generated, sending the user to their preferred email application with some prefilled data.