npm promotes metadefinitions

    nuxt-protected-mailto

    0.0.12 • Public • Published

    nuxt-protected-mailto

    npm version npm downloads License

    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

    📖 Release Notes

    Setup

    1. Add nuxt-protected-mailto dependency to your project
    yarn add nuxt-protected-mailto # or npm install nuxt-protected-mailto
    1. Add nuxt-protected-mailto to the modules section of nuxt.config.js
    {
      modules: [
        'nuxt-protected-mailto',
      ]
    }
    1. Set build.html.minify.decodeEntities = false in nuxt.config.js
    {
      build: {
        html: {
          minify: {
            decodeEntities: false
          }
        }
      }
    }
    1. 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" />

    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
    Slot Description
    Default Valid HTML to go inside the link

    Development

    1. Clone this repository
    2. Install dependencies using yarn install or npm install
    3. Start development server using npm run dev

    Help wanted

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

    Keywords

    none

    Install

    npm i nuxt-protected-mailto

    DownloadsWeekly Downloads

    110

    Version

    0.0.12

    License

    MIT

    Unpacked Size

    8.53 kB

    Total Files

    5

    Last publish

    Collaborators

    • mmoollllee