nuxt-mailer
Advanced tools
npm run dev:prepare to generate type stubs.npm run dev to start playground in development mode.Install
npm install nuxt-mailer
Add nuxt-mailer to nuxt.config modules array
export default defineNuxtConfig({
modules: ['nuxt-mailer']
})
Example usage:
server/app/email/emailSender.ts
import { useMailer } from '#mailer'
import { EmailTemplate } from './types/emailTypes'
export async function sendEmail(template: EmailTemplate , to: string, from: string, subject: string) {
const mailer = useMailer()
const username = process.env.MAIL_USERNAME as string
const password = process.env.MAIL_PASSWORD as string
const gmailTranport = mailer.customTranporter({
service: 'gmail',
auth: {
user: username,
pass: password
}
})
await mailer.sendMail({
requestId: 'test-key',
options: {
from: from,
to: to,
subject: subject,
text: template.text,
html: template.html
},
transporter: gmailTranport
})
}
server/app/email/verifyEmail.ts
import verifyEmailTemplate from './templates/verifyEmailTemplate'
import { sendEmail } from './emailSender'
export default async function sendVerificationEmail(email: string) {
const template = verifyEmailTemplate('coolbeans', 'support@fullstackjack.dev', 'Avantage Support', 'Avantage')
sendEmail(template, email, 'jack@fullstackjack.dev', 'Avantage email verification')
}
My wife is giving me that "you better get off your laptop and celebrate Christmas" stare
I'll post more examples after the holidays. . .
server/app/email/templates/verifyEmailTemplate.ts
import { EmailTemplate } from "../types/emailTypes"
const verifyEmailTemplate = function (
otp: string,
supportEmail: string,
supportName: string,
accountName: string
): EmailTemplate {
const html = `
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<title>Reset your Password</title>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700"
rel="stylesheet" media="screen">
<style>
.hover-underline:hover {
text-decoration: underline !important;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
50% {
opacity: .5;
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@media (max-width: 600px) {
.sm-px-24 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sm-py-32 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.sm-w-full {
width: 100% !important;
}
}
</style>
</head>
<body
style="margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased; --bg-opacity: 1; background-color: #eceff1;">
<div style="display: none;">A request to create your ${accountName} account was received.
Use this link to confirm your account and log in</div>
<div role="article" aria-roledescription="email" aria-label="Reset your Password" lang="en">
<table style="font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif; width: 100%;" width="100%"
cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center"
style="--bg-opacity: 1; background-color: #eceff1; font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif;">
<table class="sm-w-full" style="font-family: 'Montserrat',Arial,sans-serif; width: 600px;" width="600"
cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="sm-py-32 sm-px-24"
style="font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif; padding: 48px; text-align: center;"
align="center">
<a href=""
style="border: 0; max-width: 100%; line-height: 100%; vertical-align: middle;">
</a>
</td>
</tr>
<tr>
<td align="center" class="sm-px-24" style="font-family: 'Montserrat',Arial,sans-serif;">
<table style="font-family: 'Montserrat',Arial,sans-serif; width: 100%;" width="100%" cellpadding="0"
cellspacing="0" role="presentation">
<tr>
<td class="sm-px-24"
style="--bg-opacity: 1; background-color: #ffffff; border-radius: 4px; font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 24px; padding: 48px; text-align: left; --text-opacity: 1; color: #626262;"
align="left">
<p style="font-weight: 600; font-size: 18px; margin-bottom: 0;">Hey there,</p>
<p style="margin: 0 0 24px;">
A request to create your ${accountName} account was received.
Use this OTP to verify your email
</p>
<lable style="display: block; font-size: 24px; line-height: 100%; margin-bottom: 24px; --text-opacity: 1; color: #000000; text-decoration: none;">${otp}</lable>
<table style="font-family: 'Montserrat',Arial,sans-serif;" cellpadding="0" cellspacing="0"
role="presentation">
<tr>
<td
style="mso-padding-alt: 16px 24px; --bg-opacity: 1; background-color: #7367f0; border-radius: 4px; font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif;">
</td>
</tr>
</table>
<table style="font-family: 'Montserrat',Arial,sans-serif; width: 100%;" width="100%"
cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td
style="font-family: 'Montserrat',Arial,sans-serif; padding-top: 32px; padding-bottom: 32px;">
<div
style="--bg-opacity: 1; background-color: #eceff1; height: 1px; line-height: 1px;">
‌</div>
</td>
</tr>
</table>
<p style="margin: 0 0 16px;">
Needing some additional support? Please contact us at
<a href="mailto:${supportEmail}" class="hover-underline"
style="--text-opacity: 1; color: #7367f0; text-decoration: none;">${supportEmail}</a>.
</p>
<p style="margin: 0 0 16px;">Thanks, <br>${supportName}</p>
</td>
</tr>
<tr>
<td style="font-family: 'Montserrat',Arial,sans-serif; height: 20px;" height="20"></td>
</tr>
<tr>
<td style="font-family: 'Montserrat',Arial,sans-serif; height: 16px;" height="16"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>`
const text = `
Verify Email, A request to create your ${accountName} account was received.
Use this OTP to confirm your account and log in`
return {
html,
text
}
}
export default verifyEmailTemplate
FAQs
> nuxt-mailer is a module for integrating node mailer into your nuxt application. If you need any information not found in this readme, check the node mailer docs.
The npm package nuxt-mailer receives a total of 37 weekly downloads. As such, nuxt-mailer popularity was classified as not popular.
We found that nuxt-mailer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.