> ## 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.

# Manual Setup

> Create a brand-new folder with packages powered by Vuemail.

> [!NOTE]
>
> Are you using monorepos? Then we recommend you follow our [monorepos setup](https://vuemail.dev/docs/getting-started/monorepo-setup/choose-package-manager).

## 1. Install dependencies

Install the Vuemail packages locally.

```sh npm theme={null}
npm install @vuemaildev/ui -D -E
npm install @vuemaildev/vuemail vue -E
```

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

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

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

> [!NOTE]
>
> 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.

```json package.json theme={null}
{
  "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:

```vue 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>
```

## 4. Run locally

Start the development server.

```sh npm theme={null}
npm run email:dev
```

```sh yarn theme={null}
yarn email:dev
```

```sh pnpm theme={null}
pnpm email:dev
```

```sh bun theme={null}
bun email:dev
```

## 5. See changes live

Visit [localhost:3000](http://localhost:3000) and edit `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)

## 6. Next steps

Try adding these other components to your email.

> **[Image](https://vuemail.dev/docs/components/image.md)**
>
> Display an image in your email.

> **[Link](https://vuemail.dev/docs/components/link.md)**
>
> A hyperlink to web pages or anything else a URL can address.

> **[Divider](https://vuemail.dev/docs/components/hr.md)**
>
> Display a divider that separates content areas in your email.

> **[Preview](https://vuemail.dev/docs/components/preview.md)**
>
> A preview text that will be displayed in the inbox of the recipient.


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