Editing the components

To facilitate developing components, use the built-in playground, which automatically hot reloads when you make changes to the components during development.

1. Create an email template

Create a new file at playground/emails/testing.vue

playground/emails/testing.vue

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

<template>
  <Tailwind>
    <Html>
      <Head />

      <Body class="bg-black text-white">
        <Text class="m-0 my-4 bg-green-200 text-slate-800">
          This is a testing email template.
        </Text>
      </Body>
    </Html>
  </Tailwind>
</template>

The .gitignore file will ignore all changes in playground/emails so you can test component changes and use cases in example templates without committing them to the repository.

2. Run playground server

playground

pnpm dev

3. Open in your browser

Go to http://localhost:3000

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Editing the components

1. Create an email template

2. Run playground server

3. Open in your browser

​1. Create an email template

​2. Run playground server

​3. Open in your browser

1. Create an email template

2. Run playground server

3. Open in your browser