Skip to content
Nuxt component to protect email from spam-bots without sacrificing usability.
JavaScript Vue
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components
dist
example
.DS_Store
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
CHANGELOG.md
LICENSE
README.md
babel.config.js
commitlint.config.js
module.js
package-lock.json
package.json
renovate.json

README.md

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 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: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>

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.

You can’t perform that action at this time.