Quasar: Send email with custom data from web app without backend

This is my 4th write up on dev.to site. I show you a simple way to send an email with data from your Quasar web app. It works on my Android phone (not tested on iOS).

(HTML) a href mailto:

HTML language implements mailto: schema to send an email from web page. Typical example is something like:

<a href="mailto:email@example.com?subject=Mail from our Website">Send Email</a>

Click on this <a> tag and the browser calls mail app from your operating system.

(Quasar) q-btn href mailto:

In Quasar framework you can use href mailto: even in button (q-btn component).

Quasar is based on VueJS so you can use attribute's values indirectly from variable.

What does it mean? Instead of

<q-btn href="mailto:email@example.com?subject=data backup" label="send email" color="green" class="full-width" no-caps></q-btn>

you can use

<q-btn :href="mail" label="send email" color="green" class="full-width" no-caps></q-btn>

And this is the place where the important part happens. Suppose we have variables defined in Quasar/VueJS app:

data: function(){
  return {
    address: "email@example.com",
    subject: "data backup",
    people: [{id: "001", name: "John"}, {id: "002", name: "Lucy"}],
  }
},

The people array is an example of data we send via email. We define computed function named mail which returns string value with complete mailto: schema including people array as body of the email message.

computed: {
  mail: function(){
    var date = new Date().toLocaleString("cs-CZ", {day: "2-digit", month: "2-digit", year: "numeric"});
    var data = "\n\n\n\n" + JSON.stringify(this.people) + "\n\n\n\n"

    return encodeURI(`mailto:${address}?subject=${subject} ${date} &body=${data}`)
  }
},

Pay attention to:

• encodeURI() function, it encodes string to be safely used via http protocol
• JSON.stringify() to convert JSON object to string
• backticks at both sides of mailto: schema, it allows us to unite both string and variable's value

You can ask two questions now:

Q: Why there is "\n\n\n\n" on both sides of data we send?
A: It is not necessary but that helps you copy data from mail client on mobile phone reading received message.
Q: What is it good for?
A: You can use it as an naive data backup of your app's data - or - as an information email containing data you would like to see.

Hope this article helps you...