Skip to content

✉️ Display HTML e-mails in your Vue projects. (Targets Gmail rendering.)

License

Notifications You must be signed in to change notification settings

mat-sz/vue-letter

Repository files navigation

vue-letter

npm npm NPM

Vue.js port of react-letter.

Available in NPM, can be installed with yarn add vue-letter or npm install vue-letter.

Usage

<script setup>
  import { Letter } from 'vue-letter';
</script>

<template>
  <div id="app">
    <Letter html="<script>test</script> hello <h1>world</h1>" />
  </div>
</template>

Attributes

All react-letter properties are supported.

Attribute Type Description Default
className String Class name of the wrapper div. undefined
html String Unsanitized e-mail HTML contents.
text String Unsanitized e-mail text contents (fallback if html is not set or empty).
useIframe Boolean Should the HTML be wrapped in an iframe. false
iframeTitle String Iframe title, usually set to subject of the message.
rewriteExternalResources Function(string) => string The result of this function will be used to rewrite the URLs for url(...) in CSS and src attributes in HTML.
rewriteExternalLinks Function(string) => string The result of this function will be used to rewrite the URLs for href attributes in HTML.
allowedSchemas String[] List of allowed URL schemas. ['http', 'https', 'mailto']
preserveCssPriority Boolean Preserves CSS priority (!important). true