> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Setting up for yarn workspaces

> Configure Vuemail on a yarn monorepo

> [!NOTE]
>
> This is a guide intended at users of [yarn modern](https://yarnpkg.com/getting-started/qa#why-should-you-upgrade-to-yarn-modern).
> For those who are using [yarn classic](https://www.npmjs.com/package/yarn) (`1.x`), you can do something similar to the
> [pnpm guide](https://vuemail.dev/docs/getting-started/monorepo-setup/pnpm.md).

## 1. Create transactional 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. Set linker either to `node-modules` or to `pnpm`

Currently, Vuemail can only work with yarn's `node-modules` and `pnpm` [install modes](https://yarnpkg.com/features/linkers)
so you will need to set it to one of these two on your `.yarnrc.yml` file:

```yml .yarnrc.yml theme={null}
nodeLinker: node-modules
```

## 3. Install dependencies

Install Vuemail in the `transactional` workspace.

```sh packages/transactional theme={null}
yarn add @vuemaildev/ui -D -E
yarn add @vuemaildev/vuemail vue -E
```

## 4. Add scripts

Include the following script in your `package.json` file.

```json packages/transactional/package.json theme={null}
{
  // ...
  "scripts": {
    "dev": "email dev"
  }
  // ...
}
```

## 5. Write your emails

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

```vue packages/transactional/emails/email.vue theme={null}
<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>
```

## 6. Run preview server

Start the email previews development server:

```sh packages/transactional theme={null}
yarn dev
```

## 7. See changes live

Visit [localhost:3000](http://localhost:3000) and edit the `emails/email.vue` file to see the changes.

![Local Development](https://mintcdn.com/vuemail/ub4RJR7qi6Nze3pN/images/manual-setup-dev.png?fit=max\&auto=format\&n=ub4RJR7qi6Nze3pN\&q=85\&s=4a48876ca3b613b1937ef3184cd03660)

## 8. 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](https://vuemail.dev/docs/getting-started/nuxt.md) with the
`@vuemaildev/nuxt` module. See [compiling emails](https://vuemail.dev/docs/guides/vite.md) for the options.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.