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

# Preview

> A preview text that will be displayed in the inbox of the recipient.

> [!NOTE]
>
> Email clients have this concept of “preview text” which gives insight into
> what's inside the email before you open. A good practice is to keep that text
> under 90 characters.

## Install

Install component from your command line.

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

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

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

## Getting started

Add the component to your email template. Include styles where needed.

```vue theme={null}
<script setup lang="ts">
import { Preview } from '@vuemaildev/vuemail';
</script>

<template>
  <Preview>Email preview text</Preview>
</template>
```

The preview text comes from the default slot, which can interpolate values, as in
`<Preview>Welcome, {{ name }}</Preview>`. It's cut at 200 characters.

## Props

**use-title-tag** `boolean` (default: true)

Also use the preview text as the `<title>` of the email. `render` moves the title into the `<head>`,
wherever `Preview` is placed.

## Support

All components were tested using the most popular email clients.

![Gmail](https://vuemail.dev/static/icons/gmail.svg)

Gmail

![Apple Mail](https://vuemail.dev/static/icons/apple-mail.svg)

Apple Mail

![Outlook](https://vuemail.dev/static/icons/outlook.svg)

Outlook

![Yahoo! Mail](https://vuemail.dev/static/icons/yahoo-mail.svg)

Yahoo! Mail

![HEY](https://vuemail.dev/static/icons/hey.svg)

HEY

![Superhuman](https://vuemail.dev/static/icons/superhuman.svg)

Superhuman


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