Usage
Transform Vue components into HTML email templates.
1. Create an email using vue
You can start building your email template in a .vue or .ts file.
<script setup lang="ts">
import { Button, Hr, Html, Text } from '@vue-email/components'
defineProps({
title: String,
})
</script>
<template>
<Html lang="en">
<Text>{{ title }}</Text>
<Hr />
<Button href="https://example.com">Click me</Button>
</Html>
</template>
2. Convert to HTML
Import an existing Vue component and convert into a HTML string.
pretty option to beatify the output.import { MyTemplate } from './email';
import { render } from '@vue-email/render';
const html = await render(MyTemplate,{
title: 'some title',
},{
pretty: true,
});
console.log(html);
This will generate the following outputs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr">
<p style="font-size:14px;line-height:24px;margin:16px 0;">some title</p>
<hr style="width: 100%; border: none; border-top: 1px solid #eaeaea;"><a style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px 0px 0px;" href="https://example.com"><span></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0;">Click me</span><span></span></a>
</html>
3. Convert to Plain Text
Plain text versions of emails are important because they ensure that the message can be read by the recipient even if they are unable to view the HTML version of the email.
This is important because not all email clients and devices can display HTML email, and some recipients may have chosen to disable HTML email for security or accessibility reasons.
Here’s how to convert a Vue component into plain text.
import { MyTemplate } from './email';
import { render } from '@vue-email/render';
const text = await render(MyTemplate, {
title: 'some title',
}, {
plainText: true,
});
console.log(text);
This will generate the following output:
some title
--------------------------------------------------------------------------------
Click me https://example.com
Options
Beautify HTML output
Generate plain text version
html-to-text options used for rendering