Mails

For mails supastarter integrates Vue Email (opens in a new tab) 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:

• Plunk
• Postmark
• Resend
• Nodemailer - Use your own SMTP server
• Custom provider - Use any other provider you like

Set from mail address

Next up, set the from mail address in the packages/mail/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 (opens in a new tab).

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 (opens in a new tab) 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',
});