Create Your Mailto Link Generator In Vue.js

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

Post NameMailto Link Builder Generator
Author NameAjitZero
CategoryForm Plugins, Vue
Official PageClick Here | Click Here | CodePen
Official Websitegithub.com
Publish DateFebruary 14, 2022
Last UpdateJuly 17, 2023
DownloadLink Below
LicenseMIT

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

mailto-link-builder-generator

Official Website(AjitZero): Click Here

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

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *