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:[email protected]".

Demo

📖 Release Notes

Setup

1. Add nuxt-protected-mailto dependency to your project

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

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

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

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

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

4. Use the global Mailto Component With the Email as output.

<Mailto mail="[email protected]" subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email" />

With Caption

<Mailto mail="[email protected]" subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email">
  Button Caption
</Mailto>

For multiple recipients

<Mailto mail="[email protected], [email protected]" subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email" />

<!-- OR -->

<Mailto :mail="['[email protected]', '[email protected]']" 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.

Props & slots

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

Help wanted

This is my very first NUXT Module. Please reach out to me if there is something I could do better.