DEV Community

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

Posted on

4

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.

Vue Email Components

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

Demo

SPONSORS

 

Support

If you find this project useful, you can support development via the following methods:

Donate via PayPal

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>
<
Enter fullscreen mode Exit fullscreen mode

ACI image

ACI.dev: The Only MCP Server Your AI Agents Need

ACI.dev’s open-source tool-use platform and Unified MCP Server turns 600+ functions into two simple MCP tools on one server—search and execute. Comes with multi-tenant auth and natural-language permission scopes. 100% open-source under Apache 2.0.

Star our GitHub!

Top comments (0)

ACI image

ACI.dev: Fully Open-source AI Agent Tool-Use Infra (Composio Alternative)

100% open-source tool-use platform (backend, dev portal, integration library, SDK/MCP) that connects your AI agents to 600+ tools with multi-tenant auth, granular permissions, and access through direct function calling or a unified MCP server.

Check out our GitHub!

Join the Runner H "AI Agent Prompting" Challenge: $10,000 in Prizes for 20 Winners!

Runner H is the AI agent you can delegate all your boring and repetitive tasks to - an autonomous agent that can use any tools you give it and complete full tasks from a single prompt.

Check out the challenge

DEV is bringing live events to the community. Dismiss if you're not interested. ❤️