Nuxt Protected Mailto

Nuxt Protected Mailto is an open-source Nuxt module that protects email addresses in SSG and SSR projects from spam bots by encoding the HTML output and generating mailto links via JavaScript.

What is Nuxt Protected Mailto?

Nuxt Protected Mailto is a Nuxt module that provides a global Mailto component for rendering email links. It takes a mail prop — either a string or an array of strings — plus optional subject, body, cc, and bcc props, and it outputs an HTML element that, when clicked, opens the user's email client with the address and prefilled fields. The module encodes every email address in the server-rendered HTML into HTML Unicode Entities, so the raw source does not contain plain-text addresses, and it replaces a static href="mailto:..." attribute with a JavaScript-generated mailto link. The author describes it as the Nuxt 3 update of their first Nuxt module, and a live demo is available at https://mmoollllee.github.io/nuxt-protected-mailto/.

Key Features

The module encodes email addresses in the HTML output and handles link generation client-side, with these specific features:

• HTML Unicode Entity encoding — Email addresses are converted to HTML Unicode Entities in the generated HTML output, preventing spam bots from scraping plain-text emails from the page source.
• JavaScript-driven mailto generation — The mailto: URL is constructed and executed only when the user clicks, so the raw HTML never contains a literal mailto href.
• Multiple recipient support — The mail prop accepts either a comma-separated string (for example [email protected], [email protected]) or an array of email strings.
• Prefillable email fields — Optional subject, body, cc, and bcc props let you open the email client with the subject line, message body, and copy recipients already populated.
• Customizable label via default slot — You can wrap any valid HTML inside the <Mailto> component as the clickable caption; if no slot content is provided, the email address itself is displayed.
• Simple setup — Install with npx nuxi module add nuxt-protected-mailto or npm install nuxt-protected-mailto, add it to your Nuxt config, and the component is globally available.
• Target attribute support — The target prop is available for controlling how the link opens, matching standard link behavior.

Who is it for?

Nuxt Protected Mailto is built for developers and site owners who publish emails on Nuxt-powered sites and want to keep them out of the hands of spambots.

• Nuxt 3 developers building static (SSG) or server-rendered (SSR) sites who want to show email addresses without exposing them to email harvesters.
• Portfolio and business site owners who list contact addresses in footers or contact pages and want to reduce spam without forcing users to decode an obfuscated string.
• Open-source project maintainers who ship documentation or landing pages built with Nuxt and need a drop-in component for creating protected mailto links.

What can you do with Nuxt Protected Mailto?

The component can be used in any place you would normally write a plain mailto link, with these practical applications:

• Contact pages: Display a clickable email link with a prefilled subject and body using mail, subject, and body props.
• Team directories: Pass an array of recipient addresses to the mail prop to let visitors email multiple team members from one link.
• Newsletter or action buttons: Use the default slot to render a button-styled link that opens a pre-addressed email when clicked.

How does it work?

Install the module and register it in your nuxt.config.ts. Use the <Mailto> component anywhere in your app; at build or render time the email addresses are encoded to HTML entities in the HTML output, and the link's click handler builds the mailto URL from the provided props when the user clicks.

FAQ

Is Nuxt Protected Mailto free?

Yes, it is an open-source module distributed through npm. It is available for free under the license shown on its npm package page.

Does Nuxt Protected Mailto work with Nuxt 2 or Nuxt 3?

This is the Nuxt 3 update of the author's original Nuxt module, so it targets Nuxt 3 projects using SSG or SSR.

Can I protect multiple email addresses at once?

Yes, the mail prop accepts either a comma-separated string or an array of email addresses, and each address is included in the generated mailto link.

How is the email address protected from bots?

The module encodes the email address into HTML Unicode entities in the rendered HTML, and it does not output a literal href="mailto:..." attribute. The mailto link is only constructed client-side when the link is clicked.

Does it affect users' ability to email?

No. The component is designed to protect from spam bots without sacrificing usability — users click the link and their email client opens with the address and any prefilled fields.