Link generator for mailto is a Vue.js applet for creating custom mail-to links with a specific email address, subject, CC, BCC, or message body.

Designed this applet to build links for mailto with an interface to:

• Subject
• CC
• BCC
• Body

Must Read: Drag-n-Drop Subscription Email Editor Component for Angular

Link Builder for Mailto Vue.js Details

How to make use of it:

Install & Download:

<template>
  <div id="app">
    <h1>
      Create your
      <code>mailto</code>
      link quickly!
    </h1>

    <code class="outputBox">
      {{ outputUrl }}
    </code>

    <form>
      <label for="target-email-id">Target Email ID</label>
      <input
        name="target-email-id"
        placeholder="Target Email ID"
        type="email"
        v-model="emailId"
        v-on:keyup="updateOutputUrl"
      />
      <label for="subject">Subject</label>
      <input
        name="subject"
        placeholder="Subject"
        type="text"
        v-model="email.subject"
        v-on:keyup="updateOutputUrl"
      />
      <label for="cc">CC</label>
      <input
        name="cc"
        placeholder="CC"
        type="text"
        v-model="email.cc"
        v-on:keyup="updateOutputUrl"
      />
      <label for="bcc">BCC</label>
      <input
        name="bcc"
        placeholder="BCC"
        type="text"
        v-model="email.bcc"
        v-on:keyup="updateOutputUrl"
      />
      <label for="body">Body</label>
      <textarea
        name="body"
        placeholder="Body"
        type="text"
        v-model="email.body"
        v-on:keyup="updateOutputUrl"
      ></textarea>
      <input type="hidden" id="final-link-to-copy" :value="outputUrl" />
    </form>

    <a class="btn" @click.stop.prevent="copyToClipboard">Copy to Clipboard</a>

    <a class="btn" v-bind:href="outputUrl">Test it!</a>

  </div>
</template>

export default {
  created() {
    this.updateOutputUrl();
  },
  data() {
    return {
      outputUrl: "Type something",
      emailId: "[email protected]",
      email: {
        subject: "Hey there",
        cc: "[email protected]",
        bcc: "[email protected]",
        body: "Hey there, how have you been?"
      }
    };
  },
  methods: {
    updateOutputUrl() {
      this.outputUrl = "mailto:" + this.emailId;
      const emailKeys = Object.keys(this.email);
      const remaining = emailKeys.filter(
        (key) => this.email[key].trim().length > 0
      );
      if (remaining.length > 0) {
        this.outputUrl += "?";
      }

      this.outputUrl += remaining
        .map((key) => `${key}=${encodeURI(this.email[key].trim())}`)
        .join("&");
    },
    copyToClipboard() {
      const finalLinkToCopy = document.querySelector("#final-link-to-copy");
      finalLinkToCopy.setAttribute("type", "text");
      finalLinkToCopy.select();
      try {
        let res = document.execCommand("copy");
        alert("Copied to clipboard!");
      } catch (e) {
        alert("Unable to copy! Please select the text & copy it.");
      }
      finalLinkToCopy.setAttribute("type", "hidden");
      window.getSelection().removeAllRanges();
    }
  }
};

See Demo And Download

Official Website(AjitZero): Click Here

This superior jQuery/javascript plugin is developed by AjitZero. For extra Advanced Usage, please go to the official website.