Setting up for bun workspaces

1. Create workspace

Create a new folder called transactional inside of where you keep workspace packages (generally ./packages/*). Include a new package.json and do not forget to add this to the workspaces of your monorepo’s package.json.

2. Install dependencies

Install Vuemail to the transactional workspace.

packages/transactional

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

3. Add scripts

Include the following script in your package.json file.

packages/transactional/package.json

{
  // ...
  "scripts": {
    "dev": "email dev"
  }
  // ...
}

4. Write your emails

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

packages/transactional/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>

5. Run preview server

Start the email previews development server:

packages/transactional

bun dev

6. See changes live

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

7. Use the emails in your apps

Other workspaces can depend on transactional and import its emails to render them. Importing .vue files takes a bundler that compiles them, like Nuxt with the @vuemaildev/nuxt module. See compiling emails for the options.

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Setting up for bun workspaces

1. Create workspace

2. Install dependencies

3. Add scripts

4. Write your emails

5. Run preview server

6. See changes live

7. Use the emails in your apps

​1. Create workspace

​2. Install dependencies

​3. Add scripts

​4. Write your emails

​5. Run preview server

​6. See changes live

​7. Use the emails in your apps

1. Create workspace

2. Install dependencies

3. Add scripts

4. Write your emails

5. Run preview server

6. See changes live

7. Use the emails in your apps