Components
Markdown
A Markdown component that converts markdown to valid vue-email template code
Install
Install component from your command line.
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/markdown
Getting started
Add the component to your email template. Include styles where needed.
<script setup lang="ts">
import { Markdown, Html } from "@vue-email/components";
const md = `# Hello, World!`
</script>
<template>
<Html lang="en" dir="ltr">
<Markdown
:markdown-custom-styles="{
h1: { color: 'red' },
h2: {
color: 'blue',
},
codeInline: {
background: 'grey',
},
}"
:markdown-container-styles="{
padding: '12px',
border: 'solid 1px black',
}"
:source="md"
/>
</Html>
</template>
Props
sourcerequired
string
Contains the markdown content that will be rendered in the email template
ContainerStyles
string
Provide custom styles for the containing div that wraps the markdown content
CustomStyles
string
Provide custom styles for the corresponding HTML element (p, h1, h2, etc.)
Note: Passing a custom style for an element overrides the default styles.