@vuemaildev/vuemail

Getting started

To get started, open a new shell and run:

npx create-vuemail@latest

This will create a new folder called vuemail-starter with a few email templates.

To add Vuemail to an existing project instead, install it:

npm i @vuemaildev/vuemail

Components

Emails are Vue single file components that use the components of this package, in the emails directory:

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

const { url } = defineProps<{ url: string }>();

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

<template>
  <Html lang="en">
    <Button :href="url">Click me</Button>
  </Html>
</template>

PreviewProps are the props the preview renders the email with. The components are:

• Html
• Head
• Body
• Button
• Container
• CodeBlock
• CodeInline
• Column
• Row
• Font
• Heading
• Hr
• Img
• Link
• Markdown
• Preview
• Section
• Tailwind
• Text

This package also exports render, from @vuemaildev/render, which turns an email into HTML or plain text.

Commands

The package comes with the email command. It runs the preview app, @vuemaildev/ui, which it asks to install as a dev dependency, in the same version as @vuemaildev/vuemail, the first time you use it.

email dev

Starts a local development server that will watch your files and automatically rebuild your email when you make changes.

npx vuemail dev

When --clients is left out, the COMPATIBILITY_EMAIL_CLIENTS environment variable is used, and without it the compatibility checks cover Gmail, Apple Mail, Outlook and Yahoo! Mail. The supported clients are gmail, outlook, yahoo, apple-mail, aol, thunderbird, microsoft, samsung-email, sfr, orange, protonmail, hey, mail-ru, fastmail, laposte, t-online-de, free-fr, gmx, web-de, ionos-1and1, rainloop and wp-pl.

Templates are compiled with Vite and its Vue plugin, so they can be single file components written in TypeScript, and the paths aliases of your tsconfig.json are resolved. To compile them with more Vite plugins, like one that imports another kind of file, pass --vite-plugins a module whose default export is an array of plugins (or a function returning one). email build and email export take it too.

email build

Builds the preview app, with all of your emails, into a static website.

npx vuemail build

email start

Runs the built preview app that is inside of .vuemail.

npx vuemail start

email export

Generates the plain HTML files of your emails into a out directory.

npx vuemail export

email resend

Connects the CLI to your Resend account through an API key, so that you can upload your emails to Resend as templates from the preview app.

npx vuemail resend setup

To delete the API key from the Vuemail configuration:

npx vuemail resend reset

Setting Up the Environment

When working in the CLI, a lot of friction can get introduced with rebuilding it for every change. To avoid that, you can keep it building in watch mode, and run it from the playground, which uses the @vuemaildev/vuemail package of this monorepo.

This assumes the packages were built once, with pnpm build at the root of the monorepo, since the CLI runs the preview app from @vuemaildev/ui's build.

1. Build @vuemaildev/vuemail in watch mode

Inside of packages/vuemail:

pnpm build:watch

2. Run the CLI

From the playground directory:

pnpm exec email [command] [flags]

License

MIT License