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

# 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.