> ## 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.
# Messages as props
> Localize Vuemail emails by passing their messages as props
The simplest way to localize an email needs no library at all: load the messages for the recipient's
locale where you send the email, and pass them to it as a prop. The email only renders the strings
it's given, so it works the same with `render`, in `email dev`, and with any i18n library your app
already uses to pick the messages.
This guide shows how to convert an English Vuemail template to support multiple locales.
## Prerequisites
To get the most out of this guide, you’ll need to:
* [Set up Vuemail](https://vuemail.dev/docs/getting-started/automatic-setup.md)
This guide will use the same email template as a base as the [vue-i18n guide](https://vuemail.dev/docs/guides/internationalization/vue-i18n.md).
## Passing messages as props
### 1. Create messages for each locale
For each locale, create a new JSON file containing the content of the email in that locale.
```json messages/en/welcome-email.json theme={null}
{
"header": "Welcome to Acme",
"hi": "Hi",
"thanks": "Thanks for signing up! We're excited to have you on board.",
"getStarted": "Get Started",
"questions": "If you have any questions, reply to this email. We're here to help!"
}
```
```json messages/es/welcome-email.json theme={null}
{
"header": "Bienvenido a Acme",
"hi": "Hola",
"thanks": "Gracias por registrarte! Estamos emocionados de tenerte en la plataforma.",
"getStarted": "Comenzar",
"questions": "Si tienes alguna pregunta, responde a este correo electrónico. Estamos aquí para ayudarte!"
}
```
```json messages/pt/welcome-email.json theme={null}
{
"header": "Bem-vindo ao Acme",
"hi": "Olá",
"thanks": "Obrigado por se inscrever! Estamos ansiosos para te receber na plataforma.",
"getStarted": "Começar",
"questions": "Se você tiver alguma dúvida, responda a este e-mail. Estamos aqui para ajudar!"
}
```
### 2. Update the email props
Add a `messages` prop to the email template, with a type for its messages, and use the English
messages for the preview. `defineOptions` can reference imports, so the preview uses the same file:
```vue emails/welcome.vue theme={null}
```
### 3. Update the email template
In the email template, remove the hardcoded content and render the messages instead.
```vue emails/welcome.vue expandable theme={null}
{{ messages.header }}
{{ messages.header }}
{{ messages.hi }} {{ name }}
{{ messages.thanks }}
{{ messages.questions }}
```
### 4. Update any email calls
When calling the email template, load the messages for the recipient's locale and pass them to the email.
```ts theme={null}
import { render } from '@vuemaildev/vuemail';
import WelcomeEmail from './emails/welcome.vue';
const locale = 'es';
const { default: messages } = await import(`./messages/${locale}/welcome-email.json`);
const html = await render(WelcomeEmail, { name: 'John Lennon', messages });
```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.