nuxt-protected-mailto
TypeScript icon, indicating that this package has built-in type declarations

0.1.1 • Public • Published

Nuxt Protected Mailto

npm version npm downloads License Nuxt

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:test@example.com".

Demo

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

For multiple recipients

<Mailto mail="test@example.com, test2@example.com" subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email" />

<!-- OR -->

<Mailto :mail="['test@example.com', 'test2@example.com']" 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.

Readme

Keywords

none

Package Sidebar

Install

npm i nuxt-protected-mailto

Weekly Downloads

104

Version

0.1.1

License

MIT

Unpacked Size

11.6 kB

Total Files

11

Last publish

Collaborators

  • mmoollllee