Overview

For mails supastarter integrates Vue Email which enables you to write your mails in Vue.

Providers

In the mail package in your repository you can find the provider folder.

There are multiple providers available:

For debugging purposes you can set the mail provider to console in config.ts. This will log the mail output only on the console and not send any mails.

Set from mail address

Next up, set the from mail address in the config.ts file. This is the mail address that will be used as the sender of all mails. Please make sure that the mail address and domain are verified in your mail provider.

export const config = {
  from: "example@example.com",
};

Mail templates

All your mail templates and components are located in the apps/web/email folder. Read more about this at the Vue Email Docs for Nuxt.

Create a mail template

To create a new mail template, simply create a new .vue in the emails folder. The components from Vue Email (such as EHtml, EText, etc.) are auto-imported.

<template>
  <Wrapper>
    <EText> Hello {{ props.name }} </EText>
  </Wrapper>
</template>
 
<script setup lang="ts">
  const props = defineProps<{
    name: string;
  }>();
</script>

Check out the offical docs of Vue Email for more information on how to use it and the available components.

Register the mail template

Before you can use your new mail template, you have to register it in the packages/mail/util/templates.ts file, there you can also define the subject.

export const mailTemplates = {
  //...
  newMail: {
    name: "NewMail.vue",
    subject: "New Mail",
  },
};

Use the mail template

Now you can send a mail with your template using the auto-imported sendEmail() method in your application (server-side only):

await sendEmail({
  to: "tim@apple.com",
  templateId: "newMail",
});