Skip to content

mmoollllee/nuxt-protected-mailto

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

nuxt-protected-mailto

npm version npm downloads License

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

  1. Add nuxt-protected-mailto dependency to your project
yarn add nuxt-protected-mailto # or npm install nuxt-protected-mailto
  1. Add nuxt-protected-mailto to the modules section of nuxt.config.js
{
  modules: [
    'nuxt-protected-mailto',
  ]
}
  1. Set build.html.minify.decodeEntities = false in nuxt.config.js
{
  build: {
    html: {
      minify: {
        decodeEntities: false
      }
    }
  }
}
  1. 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.

Props & slots

Prop Value Required
mail String | String[] Yes
subject String No
body String No
cc String | String[] No
bcc String | String[] No
Slot Description
Default Valid HTML to go inside the link

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.