Send email using Azure Communication Email

1. Install dependencies

Get the @vuemaildev/vuemail package and the Azure Communication Email SDK.

npm install @azure/communication-email @vuemaildev/vuemail

yarn add @azure/communication-email @vuemaildev/vuemail

pnpm add @azure/communication-email @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

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

import { EmailClient } from '@azure/communication-email';
import { render } from '@vuemaildev/vuemail';
import Email from './email.vue';

const client = new EmailClient(process.env.AZURE_EMAIL_CONNECTION_STRING);

const from ='you@example.com';
const emailHtml = await render(Email, { url: 'https://example.com' });

const message = {
  senderAddress: from,
  content: {
    subject: 'hello world',
    html: emailHtml,
  },
  recipients: {
    to: [{ address: 'user@gmail.com' }],
  },
};

const poller = await client.beginSend(message);

await poller.pollUntilDone();

Azure Communication Email expects the sender in the senderAddress field.

Try it yourself

Azure Communication Email example

See the full source code.

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Send email using Azure Communication Email

1. Install dependencies

2. Create an email using Vue

3. Convert to HTML and send email

Try it yourself

Azure Communication Email example

​1. Install dependencies

​2. Create an email using Vue

​3. Convert to HTML and send email

​Try it yourself

Azure Communication Email example

1. Install dependencies

2. Create an email using Vue

3. Convert to HTML and send email

Try it yourself