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]"
.
- Add
nuxt-protected-mailto
dependency to your project
yarn add nuxt-protected-mailto # or npm install nuxt-protected-mailto
- Add
nuxt-protected-mailto
to themodules
section ofnuxt.config.js
{
modules: [
'nuxt-protected-mailto',
]
}
- Set
build.html.minify.decodeEntities = false
innuxt.config.js
{
build: {
html: {
minify: {
decodeEntities: false
}
}
}
}
- 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" />
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.
Prop | Value | Required |
---|---|---|
mail |
String | String[] | Yes |
subject |
String | No |
body |
String | No |
cc |
String | String[] | No |
bcc |
String | String[] | No |
Slot | Description |
---|---|
Default | Valid HTML to go inside the link |
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
This is my very first NUXT Module. Please reach out to me if there is something I could do better.