I18n | Vue Email

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.

vue-i18n provides a translate function $t that you can use inside your templates.

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'
        }
      }
    }
  })
}

Compiler

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

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' }
})

CLI

Run the CLI to generate your email templates.

Nuxt Devtools

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