Introduction to MySigMail Vue Email Components

MySigMail Vue Email Components is a set of pre-built components that can be used to create impressive emails without the need to manually create tables and manage outdated code.

About Project

• Repository: https://github.com/mysigmail/vue-email
• Licence: MIT

Motivation

Email remains one of the most widely used and popular communication channels to this day, and its popularity shows no signs of decreasing over time. The goal of this project is to simplify the process of creating emails and make it more accessible to everyone.

Components

• MBody - A body component to wrap emails.
• MButton - A link that is styled to look like a button.
• MColumn - Display a column that separates content areas vertically in your email.
• MContainer - A layout component that centers all the email content.
• MHead - Contains head components, related to the document such as style and meta elements.
• MHeading - A block of heading text.
• MHr - Display a divider that separates content areas in your email.
• MHtml - A html component to wrap emails.
• MImage - Display an image in your email.
• MLink - A hyperlink to web pages, email addresses, or anything else a URL can address.
• MPreview - A preview text that will be displayed in the inbox of the recipient.
• MSection - Display a section that can be formatted using columns.
• MText - A block of text separated by blank spaces.

Install

pnpm add @mysigmail/vue-email-components

Use

Global

import { createApp } from 'vue'
import App from './App.vue'
import VueEmail from '@mysigmail/vue-email-components'

createApp(App).use(VueEmail).mount('#app')

Local

<script setup>
import { MButton } from '@mysigmail/vue-email-components'
</script>

<template>
  <div>
    <MButton>Click me</MButton>
  </div>
</template>

Render to HTML

<script setup>
import { render } from '@mysigmail/vue-email-components'
import YourEmail from './YourEmail.vue'

const html = render(YourEmail)
</script>

Client

The client application contained in this repository offers a convenient way to create and test email templates locally. With pre-built components to choose from and the ability to apply custom styles, users can easily customize their templates to fit their needs. The client also provides a preview of the final render, allowing users to see how their template will look before exporting the corresponding HTML code. Overall, this client application streamlines the process of creating and testing email templates, making it a valuable tool for developers and designers alike.

Install

git clone https://github.com/mysigmail/vue-email.git

pnpm install

Run

pnpm run dev

Example

To demonstrate the capabilities of the components, we recreated a Notion email template.

Conclusion

MySigMail Vue Email Components is a useful tool for developers who want to create beautiful and responsive emails using Vue.js. This package simplifies the development process, reducing the time spent on manually creating tables and managing outdated code. Instead, developers can focus on what really matters: creating effective and attractive email content.