Migrating to Vuemail

From MJML

Remove the mjml npm package and install @vuemaildev/vuemail
Find all MJML templates ending with the .mjml extension and convert these to Vue single file components with the .vue extension.
Replace MJML standard component tags with Vuemail component tags where possible, including <Text>, <Img>, <Button> etc.
Convert custom MJML components with the .js extension to Vue components with the .vue extension.

From React Email

Vuemail is a port of React Email, so its components take the same props and render the same HTML. What changes is how emails are written: as Vue single file components instead of React components.

Replace the React Email packages with the Vuemail ones, and React with Vue:

npm uninstall react-email @react-email/ui react react-dom
npm install @vuemaildev/vuemail vue
npm install @vuemaildev/ui -D

yarn remove react-email @react-email/ui react react-dom
yarn add @vuemaildev/vuemail vue
yarn add @vuemaildev/ui -D

pnpm remove react-email @react-email/ui react react-dom
pnpm add @vuemaildev/vuemail vue
pnpm add @vuemaildev/ui -D

bun remove react-email @react-email/ui react react-dom
bun add @vuemaildev/vuemail vue
bun add @vuemaildev/ui -D

Rewrite each email as a .vue file in your emails directory. Most of it maps one to one:

React Email	Vuemail
`import { Button } from 'react-email'`	`import { Button } from '@vuemaildev/vuemail'`
`Email.PreviewProps = { ... }`	`defineOptions({ PreviewProps: { ... } })`
Props of the component function	`defineProps<Props>()`
`className="..."`	`class="..."`
`tdClassName` on `Container` and `Section`	`td-class`
`href={url}`	`:href="url"`
`{name}` in text	`{{ name }}`
`{condition && <Text />}` and `.map()`	`v-if` and `v-for`
`<Markdown>{markdown}</Markdown>`	`<Markdown :source="markdown" />`
`dangerouslySetInnerHTML`	`v-html`
`render(<Email {...props} />)`	`render(Email, props)`
`react: <Email {...props} />` when sending with Resend	`html: await render(Email, props)`

Here’s an email written with Vuemail:

emails/welcome.vue

<script setup lang="ts">
import { Body, Button, Head, Html, Preview, Text } from '@vuemaildev/vuemail';

interface WelcomeEmailProps {
  name: string;
  url: string;
}

const { name, url } = defineProps<WelcomeEmailProps>();

defineOptions({
  PreviewProps: {
    name: 'Ana',
    url: 'https://vuemail.dev',
  } satisfies WelcomeEmailProps,
});
</script>

<template>
  <Html>
    <Head />
    <Preview>Welcome, {{ name }}</Preview>
    <Body>
      <Text>Hi {{ name }}, thanks for signing up!</Text>
      <Button :href="url" :style="{ padding: '12px 20px' }">Get started</Button>
    </Body>
  </Html>
</template>

Keep a few differences in mind:
- <style> tags can’t be written in Vue templates. Render them from <script setup> instead, with a small functional component: const Styles = () => h('style', { innerHTML: css }).
- Numbers in style objects get px added on Vuemail components, like in React, but not on plain elements like <td> or <p>. Prefer strings with units, like '20px'.
- defineOptions is hoisted out of <script setup>, so PreviewProps has to be written inline.
- Importing .vue files needs a bundler that compiles them. See compiling emails.

Try adding these other components to your email.

Image

Display an image in your email.

Link

A hyperlink to web pages or anything else a URL can address.

Divider

Display a divider that separates content areas in your email.

Preview

A preview text that will be displayed in the inbox of the recipient.

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Migrating to Vuemail

From MJML

From React Email

Image

Link

Divider

Preview

​From MJML

​From React Email

Image

Link

Divider

Preview

From MJML

From React Email