nuxt-protected-mailto

This module tries to protect email-addresses in your Nuxt SSG / SSR project from spam bots without without sacrificing usability. The HTML output of the mail geht's 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>

What it does

All it does, is encoding the mail address and binding a click event to hide every kind of "mailto:" in the HTML. Also it supports adding a placeholder for subject and body that will be prefilled in the user's mail application.

  // components/lib/Mailto.vue
  computed: {
    encoded() {
      const buf = []
      for (let i = this.mail.length - 1; i >= 0; i--) {
        buf.unshift(['&#', this.mail.charCodeAt(i), ';'].join(''))
      }
      return buf.join('')
    }
  },
  methods: {
    mailtoHandler(e) {
      e.preventDefault()
      window.location.href =
        'mailto:' +
        this.mail +
        '?subject=' +
        encodeURIComponent(this.subject) +
        '&body=' +
        encodeURIComponent(this.body)
    }
  }

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.