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 (opens in a new tab)
• Resend (opens in a new tab)
• Postmark (opens in a new tab)
• Nodemailer (opens in a new tab) - Use your own SMTP server

Custom provider

You can also use any other provider you like, by creating a new file in the provider folder and implementing the SendEmailHandler interface:

import { config } from '../config';
import type { SendEmailHandler } from '../types';
 
const { from } = config;
 
export const send: SendEmailHandler = async ({ to, subject, text, html }) => {
  // handle your custom email sending logic here
};

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',
});