I18n - Vue Email

This feature is new and experimental. Please report any issues you find on GitHub. Note this feature is only available on version 0.7.0 and above, please update your package to use it.

Inside configuration object, now you can add the i18n option. This is useful for adding translations to the templates with the multiple languages that you want to use.

Introduction

To use i18n in your templates, you first need to install the vue-i18n package as follow:

pnpm

pnpm i vue-i18n

If you try to pass the i18n config without install the vue-i18n package, the vue-email/compiler will throws an error indicating that the dependency is missing.

With the package installed now you can use the $t function like in Vue I18n, for example:

Take a look at the Vue I18n documentation for more information about formatting.

<script setup lang="ts">
defineProps({
  name: String,
});
</script>

<template>
  <e-text>{{ $t('greetings') }} {{ name }}</e-text>
</template>

Vue usage

To use i18n within useRender function, you need to pass the i18n config as follows:

import { useRender } from "vue-email";
import AnyComponent from "email/template/example"

async function render() {
  const template = await useRender(AnyComponent, {
    props: {
      // ... stuff
    },
    i18n: {
      locale: 'en',
      defaultLocale: 'en',
      translations: {
        en: {
          greetings: 'Hi'
        },
        es: {
          greetings: 'Hola'
        }
      }
    }
  })
}

📧 Node Usage

Config

You can add the i18n option inside the config method, this will be the default configuration for all templates.

import { config } from "vue-email/compiler";

const vueEmail = config("./templates", {
  options: {
    // ... others params,
    i18n: {
      defaultLocale: 'en',
      translations: {
        en: {
          greetings: 'Welcome',
        },
        es: {
          greetings: 'Bienvenido',
        }
      }
    }
  }
});

Rendering template

Now the render method in the second params accept others configurations where you can set defaultLocale or template translation for each template if you want.

const template = await vueEmail.render("DefineComponent.vue", {
  // ... others params,
  i18n: { defaultLocale: 'es' }
});

💚 Nuxt Usage

Config

You can add the i18n option inside the nuxt.config.ts file, this will be the default configuration for all templates.

To see other config options, check here

export default defineNuxtConfig({
  modules: ['@vue-email/nuxt'],
  vueEmail: {
    // ... others params,
    i18n: {
        defaultLocale: 'en',
        translations: {
          en: {
            greetings: 'Welcome',
          },
          es: {
            greetings: 'Bienvenido',
          }
        }
      }
  }
})

Rendering template

Now the useCompiler method in the second params accept others configurations where you can set defaultLocale or template translation for each template if you want.

import { useCompiler } from '#vue-email'

const template = await useCompiler('WelcomeEmail.vue', {
  // ... others params,
  i18n: { defaultLocale: 'es' }
})

Nuxt Devtools

Inspect your email templates and send test emails from your app directly.

Examples

Discover some real-life examples of emails you can build.