https://github.com/mysigmail/vue-email
A collection of high-quality, unstyled components for creating beautiful emails using Vue.
https://github.com/mysigmail/vue-email
email email-template unstyled-components vue-email-component
Last synced: 4 months ago
JSON representation
A collection of high-quality, unstyled components for creating beautiful emails using Vue.
- Host: GitHub
- URL: https://github.com/mysigmail/vue-email
- Owner: mysigmail
- License: mit
- Created: 2023-06-16T01:29:18.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-26T13:07:29.000Z (over 2 years ago)
- Last Synced: 2025-10-20T01:40:50.427Z (8 months ago)
- Topics: email, email-template, unstyled-components, vue-email-component
- Language: Vue
- Homepage: https://vue-email.mysigmail.com
- Size: 2.04 MB
- Stars: 63
- Watchers: 3
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Vue Email Components
A collection of high-quality, unstyled components
for creating beautiful emails using Vue.
SPONSORS
## Support
If you find this project useful, you can support development via the following methods:
[](https://paypal.me/antongithub)
## 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
```bash
pnpm add @mysigmail/vue-email-components
```
## Use
### Global
```js
import { createApp } from 'vue'
import App from './App.vue'
import VueEmail from '@mysigmail/vue-email-components'
createApp(App).use(VueEmail).mount('#app')
```
### Local
```html
import { MButton } from '@mysigmail/vue-email-components'
Click me
```
### Render to HTML
```html
import { render } from '@mysigmail/vue-email-components'
import YourEmail from './YourEmail.vue'
const html = render(YourEmail)
```
## Components
This is a collection of pre-built components that can be used to create impressive emails without the hassle of manually creating tables and managing outdated code.
- [MBody](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/body)
- [MButton](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/button)
- [MColumn](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/column)
- [MContainer](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/container)
- [MHead](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/head)
- [MHeading](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/heading)
- [MHr](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/hr)
- [MHtml](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/html)
- [MImage](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/img)
- [MLink](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/link)
- [MPreview](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/preview)
- [MSection](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/section)
- [MText](https://github.com/mysigmail/vue-email/tree/main/packages/components/src/text)
## Client
This repository 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. You can also perform a test send email.
### Install
```bash
git clone https://github.com/mysigmail/vue-email.git
pnpm install
```
### Environment
Set up variables for test email sending.
```bash
NUXT_EMAIL_HOST= # The hostname of the SMTP server used to send emails.
NUXT_EMAIL_PORT= # The port of the SMTP server.
NUXT_EMAIL_USER= # The username used to authenticate on the SMTP server.
NUXT_EMAIL_PASSWORD= # The password used to authenticate on the SMTP server.
```
### Run
```bash
pnpm run dev
```
### Development
To start developing your next email template, create a .vue file in the packages/client/emails folder.
## TODO
- [x] Test sending an email using Nodemailer.
- [ ] Add the script to the automatic setup for the client.
## Other
Inspired by [react-email](https://github.com/resendlabs/react-email)
## License
MIT
Copyright (c) 2023-present, [Anton Reshetov](https://github.com/antonreshetov).