Utilities
Render
Transform Vue components into HTML email templates.
1. Create an email using vue
You can start building your email template in a .vue file.
<script setup>
import { EButton, EHr, EHtml, EText } from 'vue-email'
defineProps({
title: String,
})
</script>
<template>
<EHtml lang="en">
<EText>{{ title }}</EText>
<EHr />
<EButton href="https://example.com">
Click me
</EButton>
</EHtml>
</template>
2. Convert to HTML/Text
Import an existing Vue component and convert into a HTML/Text strings.
You can use the
pretty option to beautify the output.<script setup>
import { useRender } from 'vue-email'
import template from '~/components/email.vue'
const email = await useRender(template, { props: { title: 'Some title' } }, {
pretty: true,
})
// returns { html: '...', text: '...' }
</script>
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 id="__vue-email" lang="en" dir="ltr">
<!--[-->
<p data-id="__vue-email-text" style="font-size:14px;line-height:24px;margin:16px 0;" >
<!--[--> Some title
<!--]-->
</p>
<hr data-id="__vue-email-hr" style="width:100%;border:none;border-top:1px solid #eaeaea;" ><a data-id="__vue-email-button" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px;" href="https://example.com" target="_blank" ><span ><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0" hidden> </i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;text-decoration:none;text-transform:none;mso-padding-alt:0px;mso-text-raise:0;" ><!--[-->Click me<!--]--></span><span ><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%" hidden> </i><![endif]--></span></a>
<!--]-->
</html>
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.
Options
pretty
boolean
Beautify HTML output