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 Name | Mailto Link Builder Generator |
Author Name | AjitZero |
Category | Form Plugins, Vue |
Official Page | Click Here | Click Here | CodePen |
Official Website | github.com |
Publish Date | February 14, 2022 |
Last Update | July 17, 2023 |
Download | Link Below |
License | MIT |
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.