Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (88 sloc) 2.65 KB
title lastmod publishdate author draft description type tags vimeo github
SendGrid Vue
2019-07-05 10:43:06 -0700
2019-07-05 10:43:06 -0700
Jeff Delaney
Send transactional email from Vue with SendGrid

{{% box emoji="👀" %}} This tutorial is an extension of the SendGrid Transactional Email Guide. You must have the Cloud Functions deployed to start sending email from your frontend app. {{% /box %}}

Initial Setup

Start by installing the Firebase Web SDK, then initialize the packages in the root of the project. Vuefire can be installed as well, but is not required for this feature.

{{< file "js" "firebase.js" >}} {{< highlight javascript >}} import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/functions';

const config = { // your firebase config }


export const app =; export const auth = firebase.auth(); export const functions = firebase.functions(); {{< /highlight >}}

Transactional Email Component

The Vue component uses the beforeCreate lifecycle hook to monintor to the user's auth state, while sendEmail references the callable function deployed to Firebase.

{{< file "vue" "HelloWorld.vue" >}} {{< highlight html >}}

{{ JSON.stringify(user) }} Send Email with Callable Function Sign Out
Login with Google
<script> import * as firebase from 'firebase/app'; import { auth, functions } from '../firebase'; export default { name: 'HelloWorld', data: function () { return { user: null } }, beforeCreate: function() { firebase.auth().onAuthStateChanged((user) => { this.user = user; }) }, methods: { signInWithGoogle: function() { return auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) }, signOut: function() { return auth.signOut(); }, sendEmail: function() { const callable = functions.httpsCallable('genericEmail'); return callable({ text: 'Sending email with Vue and SendGrid is fun!', subject: 'Email from Vue'}).then(console.log); }, } } </script>

{{< /highlight >}}

You can’t perform that action at this time.