Manual Setup

Are you using monorepos? Then we recommend you follow our monorepos setup.

1. Install dependencies

Install the Vuemail packages locally.

npm install @vuemaildev/ui -D -E
npm install @vuemaildev/vuemail vue -E

yarn add @vuemaildev/ui -D -E
yarn add @vuemaildev/vuemail vue -E

pnpm add @vuemaildev/ui -D -E
pnpm add @vuemaildev/vuemail vue -E

bun add @vuemaildev/ui -D -E
bun add @vuemaildev/vuemail vue -E

Vuemail requires Node.js 20.19 or higher and Vue 3.4 or higher. @vuemaildev/ui is the preview app, and it needs to be installed in the same version as @vuemaildev/vuemail.

2. Add scripts

Include the following script in your package.json file.

package.json

{
  "scripts": {
    "email:dev": "email dev"
  }
}

3. Write an email template

Create a new folder called emails, create a file inside called email.vue, and add the following code:

emails/email.vue

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

<template>
  <Html>
    <Head />
    <Body>
      <Button
        href="https://example.com"
        :style="{ background: '#000', color: '#fff', padding: '12px 20px' }"
      >
        Click me
      </Button>
    </Body>
  </Html>
</template>

4. Run locally

Start the development server.

npm run email:dev

yarn email:dev

pnpm email:dev

bun email:dev

5. See changes live

Visit localhost:3000 and edit email.vue file to see the changes.

6. Next steps

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

1. Install dependencies

2. Add scripts

3. Write an email template

4. Run locally

5. See changes live

6. Next steps

Image

Link

Divider

Preview

​1. Install dependencies

​2. Add scripts

​3. Write an email template

​4. Run locally

​5. See changes live

​6. Next steps

Image

Link

Divider

Preview

1. Install dependencies

2. Add scripts

3. Write an email template

4. Run locally

5. See changes live

6. Next steps