DEV Community

Cover image for Create Stunning HTML Emails with vue-email - A Vue.js Components
Anton Reshetov
Anton Reshetov

Posted on

Create Stunning HTML Emails with vue-email - A Vue.js Components

Hey everyone,

I'm excited to share a side project I've been working on - Vue Email Components.

The primary objective of this project is to simplify the process of creating emails and to make it more accessible for everyone. MySigMail Vue Email Components is a collection of high-quality, unstyled components for creating beautiful emails using Vue.

Key Features:

  • Reduces the difficulty of coding responsive emails: Helps ease the challenges of development and ensures consistency across various email clients, such as Gmail, Outlook, and others.

  • Pre-built components: This project includes a collection of components that can be used to create impressive emails without the hassle of manually creating tables and managing outdated code. Components include MBody, MButton, MColumn, MContainer, MHead, MHeading, MHr, MHtml, MImage, MLink, MPreview, MSection, MText and many more.

  • Client Application: This repository also contains a client application that serves as a local testing environment. Using this client, you can create email templates by selecting from pre-built components, apply styles to these components, preview the final render, and obtain the corresponding HTML code.

This project was inspired by react-email and aims to bring similar functionality to the Vue ecosystem. I'd love to hear your thoughts, feedback, and suggestions for improvements. Feel free to check out the repository and contribute if you're interested!

GitHub logo mysigmail / vue-email

A collection of high-quality, unstyled components for creating beautiful emails using Vue.

MySigMail Vue Email Components

A collection of high-quality, unstyled components for creating beautiful emails using Vue.

Introduction

Reduces the difficulty of coding responsive emails, easing the challenges of development and ensuring consistency across various email clients, such as Gmail, Outlook, and others.

Motivation

Email still remains one of the most widely used and popular communication channels to this day, and its popularity shows no signs of diminishing over time.

We aim to simplify the process of creating emails and make it more accessible for everyone.

Install

pnpm add @mysigmail/vue-email-components
Enter fullscreen mode Exit fullscreen mode

Use

Global

import { createApp } from 'vue'
import App from './App.vue'
import VueEmail from '@mysigmail/vue-email-components'
createApp(App).use(VueEmail).mount('#app')
Enter fullscreen mode Exit fullscreen mode

Local

<script setup>
import { MButton } from '@mysigmail/vue-email-components'
</script>
<template>
  <div>
    <MButton>Click me</MButton>
  </div>
…
Enter fullscreen mode Exit fullscreen mode

Top comments (0)