Send (& receive) emails using Inbound

1. Install dependencies

Get the @vuemaildev/vuemail package and the Inbound Node.js SDK. Make sure you have an account on inbound, you will need an inbound API key.

npm install inboundemail @vuemaildev/vuemail

yarn add inboundemail @vuemaildev/vuemail

pnpm add inboundemail @vuemaildev/vuemail

bun add inboundemail @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 Inbound SDK to send it.

import { Inbound } from 'inboundemail';
import { render } from '@vuemaildev/vuemail';
import Email from './email.vue';

const inbound = new Inbound({
  apiKey: process.env.INBOUND_API_KEY,
});

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

4. Reply to an email

Use the Inbound SDK to reply to an email with the same template you just created.

import { Inbound } from 'inboundemail';
import { render } from '@vuemaildev/vuemail';
import Email from './email.vue';

const inbound = new Inbound({
    apiKey: process.env.INBOUND_API_KEY
});

const html = await render(Email, { url: 'https://example.com' });

// sending an email via inbound
await inbound.emails.send({
  from: 'Acme <acme@inbound.new>',
  to: 'user@gmail.com',
  subject: 'hello world',
  html,
});

// replying to an email that was received via inbound
await inbound.emails.reply(email.id, {
  from: 'Acme <acme@inbound.new>',
  html,
});

Try it yourself

Get started on Inbound

See it on our examples.

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Send (& receive) emails using Inbound

1. Install dependencies

2. Create an email using Vue

3. Convert to HTML and send email

4. Reply to an email

Try it yourself

Get started on Inbound

​1. Install dependencies

​2. Create an email using Vue

​3. Convert to HTML and send email

​4. Reply to an email

​Try it yourself

Get started on Inbound

1. Install dependencies

2. Create an email using Vue

3. Convert to HTML and send email

4. Reply to an email

Try it yourself