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

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-protected-mailto
# or with npm and manually adding the module to your nuxt.config.ts
npm install nuxt-protected-mailto

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" />

That's it! ✨

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
target	String | String[]	No

Slot	Description
Default	Valid HTML to display inside the element

---

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Help wanted

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