Send email using Resend

Send email with Resend

Resend was built by the team that created React Email, the project Vuemail is a port of, and the Vuemail preview can upload your emails to it as Templates.

1. Install dependencies

Get the @vuemaildev/vuemail package and the Resend Node.js SDK.

npm install resend @vuemaildev/vuemail

yarn add resend @vuemaildev/vuemail

pnpm add resend @vuemaildev/vuemail

2. Create an email using Vue

Start by building your email template in a .vue file.

email.vue

<script setup lang="ts">
import { Button, Html } from '@vuemaildev/vuemail';

const { url } = defineProps<{ url: string }>();
</script>

<template>
  <Html lang="en">
    <Button :href="url">Click me</Button>
  </Html>
</template>

3. Convert to HTML and send email

When integrating with other services, you need to convert your Vue template into HTML before sending, which is what render does.

Import the email template you just built, convert it into an HTML string, and use the Resend SDK to send it.

import { Resend } from 'resend';
import { render } from '@vuemaildev/vuemail';
import Email from './email.vue';

const resend = new Resend('re_123456789');

await resend.emails.send({
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  html: await render(Email, { url: 'https://example.com' }),
});

Set up Templates with Resend

Resend Templates are a great way to collaborate on emails with your team, even if they’re not technical. Upload a Vuemail template to Resend and your entire team can collaborate in real-time in the visual editor. Here’s how to get started.

1. Add your Resend API Key

First, sign up for a free Resend account. Next, set up the Resend integration using the Vuemail CLI:

npx @vuemaildev/vuemail@latest resend setup

This will prompt you to enter your Resend API Key. To get one, navigate to API Keys in your Resend dashboard, click Create API key, and ensure that the API Key is scoped to Full Access. Paste the API Key into the terminal and press enter.

2. Upload a Template to Resend

Run email dev and visit the Resend tab of the toolbar, located at the bottom of the window. Choose Upload or Bulk Upload to import your Template to Resend. If you want to remove the Resend integration, run npx @vuemaildev/vuemail@latest resend reset.

Try it yourself

Resend example

See the full source code.

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Send email using Resend

Send email with Resend

1. Install dependencies

2. Create an email using Vue

3. Convert to HTML and send email

Set up Templates with Resend

1. Add your Resend API Key

2. Upload a Template to Resend

Try it yourself

Resend example

​Send email with Resend

​1. Install dependencies

​2. Create an email using Vue

​3. Convert to HTML and send email

​Set up Templates with Resend

​1. Add your Resend API Key

​2. Upload a Template to Resend

​Try it yourself

Resend example

Send email with Resend

1. Install dependencies

2. Create an email using Vue

3. Convert to HTML and send email

Set up Templates with Resend

1. Add your Resend API Key

2. Upload a Template to Resend

Try it yourself