Build Responsive Emails with the vue-email Library

vue-email is a collection of Vue components designed specifically for creating and styling HTML emails.

Components Included:

  • Layouts (MContainer, MSection, MColumn): These components provide the foundational structure for your email templates, facilitating the design of simple to complex email layouts.
  • Text Elements (MHeading, MText, MLink): Craft narratives and add functional links with these text elements.
  • Multimedia (MImage): Enhance your emails with visual content using the MImage component.
  • Email Meta (MHead, MBody): Control your email’s meta-information with MHead and MBody.
  • Interactive Elements (MButton): Create engaging, interactive elements with MButton.
  • Formatting (MHr): Add clear separations in your content using the MHr component.
  • Raw HTML (MHtml): Insert custom HTML code into your emails with the MHtml component.
  • Email Preview (MPreview): Preview the final look of your email with the MPreview component, ensuring the email looks as expected before sending.

How to use it:

1. Import the vue-email component.

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

2. Build a simple email.

<script setup lang="ts">
  import type {
  } from 'vue'
  const main: CSSProperties = {
    backgroundColor: '#ffffff',
    color: '#24292e',
    fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
  const container: CSSProperties = {
    width: '480px',
    margin: '0 auto',
    padding: '20px 0 48px',
  const title: CSSProperties = {
    fontSize: '24px',
    lineHeight: 1.25,
  const section: CSSProperties = {
    padding: '24px',
    border: 'solid 1px #dedede',
    borderRadius: '5px',
    textAlign: 'center',
  const text: CSSProperties = {
    margin: '0 0 10px 0',
    textAlign: 'left',
  const button: CSSProperties = {
    fontSize: '14px',
    backgroundColor: '#28a745',
    color: '#fff',
    lineHeight: 1.5,
    borderRadius: '0.5em',
    padding: '0.75em 1.5em',
  const links: CSSProperties = {
    textAlign: 'center',
  const link: CSSProperties = {
    color: '#0366d6',
    fontSize: '12px',
  const footer: CSSProperties = {
    color: '#6a737d',
    fontSize: '12px',
    textAlign: 'center',
    marginTop: '60px',
  const username = 'antonreshetov'
    <MHead />
    <MPreview text="A fine-grained personal access token has been added to your account" />
    <MBody :style="main">
      <MContainer :style="container">
        <MImg width="32" height="32" alt="Github" src="/github.png" />
        <MText :style="title">
          <strong>@{{ username }}</strong>, a personal access was created on your
        <MSection :style="section">
          <MText :style="text">
            Hey <strong>{{ username }}</strong>!
          <MText :style="text">
            A fine-grained personal access token (<MLink>resend</MLink>) was
            recently added to your account.
          <MButton :style="button">
            View your token
        <MText :style="links">
          <MLink :style="link">
            Your security audit log
          <MLink :style="link">
            Contact support
        <MText :style="footer">
          GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107


Build Responsive Emails with the vue-email Library

Download Details:

Author: mysigmail

Live Demo:

Download Link:

Official Website:

Install & Download:

pnpm add @mysigmail/vue-email-components

Add Comment