Installation | Vue Email

Quick Start

Install vue-email dependency to your project:

pnpm add vue-email

Add it to your index.ts file:

import { createApp } from 'vue'
import { VueEmailPlugin } from 'vue-email'

app.use(VueEmailPlugin)
app.mount('#app')

That's it! You can now use all the components and composables in your app ✨

Options

Key	Description
`baseUrl`	The base URL of your site, used for images.
`i18n`	The i18n configuration for the plugin.
`tailwind`	The Tailwind config that will be used by the `ETailwind` component

Configure options in your index.ts as such:

import { createApp } from 'vue'
import { VueEmailPlugin } from 'vue-email'

app.use(VueEmailPlugin, {
  baseUrl: 'https://example.com',
  i18n: {
    defaultLocale: 'en',
    translations: {
      en: {
        greetings: 'Welcome {user}',
      },
      es: {
        greetings: 'Bienvenido {user}',
      }
    }
  },
  tailwind: {
    theme: {
      extend: {
        colors: {
          primary: '#ea580c',
          secondary: '#ca8a04',
        },
      },
    },
  },
})

app.mount('#app')

Usage

If you want to access the config you pass to the plugin, you can do that by calling $vueEmail inside your vue code.

Edge

To use the latest updates pushed on the main branch, you can use vue-email-edge.

Update your package.json to the following:

package.json

{
  "devDependencies": {
-   "vue-email": "^0.7.2"
+   "vue-email": "npm:@vue-email-edge@latest"
  }
}

Then run pnpm install, yarn install or npm install.

Introduction

Build and send emails using Vue.

Examples

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