.Vue-email is actually encouraged by react-email, it allows our company generate design templates using the vue framework, along with components that assist our team build layouts conveniently and quickly.To begin making use of vue-email in any vue job, you only require to put up the package deal:.With NPM:.$ npm put in vue-email.With Anecdote:.$ yarn add vue-email.With PNPM:.$ pnpm install vue-email.Generating email design template.Generate a brand-new e-mail design template in any place you would like to have your design templates, for this case, our company can easily create a layout directory, with a layout contacted welcome.vue.src/templates/welcome. vue.
title, welcome to vue-email.A Vue part collection for building reactive e-mails.Sight on GitHub.Satisfied coding!David Arenas.
Making the design templates.Our company may make use of the leave function, it acquires pair of params, the 1st one is actually the template to render, as well as the 2nd the params to become utilized for the theme, and after that pass the outcome layout in the physical body of ask for.Passing the layout in the physical body, offer us the possibility of providing utilizing any type of hosting server, show, fastify, nuxt in SSR, etc src/pages/index. vue.Deliver email with nodemailer.Sent e-mail.
Send e-mail.In this particular example i using nuxt v3 considering that it permits our team to establish api inside own job, as well as define various api courses.Listed here our team simply remove the layout of the ask for body system, as well as send the email passing the design template in the sendMail functionality of the nodemailer bundle.src/server/api/ email.post.ts.bring in nodemailer from 'nodemailer'.export nonpayment defineEventHandler( async (occasion) => const body = wait for readBody( event).const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.port: 587,.safe and secure: misleading,.auth: user: testAccount.user,.successfully pass: testAccount.pass,.,. ).const options = coming from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hi there globe',.html: body.template,..wait for transporter.sendMail( choices). ).If you are certainly not using the hosting server in nuxt, you may conveniently carry out on any type of structure for instance making use of reveal:.bring convey coming from 'show'.import nodemailer from 'nodemailer'.const application = show().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const theme = req.body.const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.protected: untrue,.auth: individual: testAccount.user,.pass: testAccount.pass,.,. ).const alternatives = from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hi world',.html: theme,..wait for transporter.sendMail( options).yield res.json( information: "Email sent" ). ).app.listen( 3001 ).Documents.Obtain the complete information [listed below] ().Components.You can easily view the parts, listed here:.Integrations.E-mails constructed along with vue-email could be converted into HTML or.plain text, and also sent utilizing any e-mail company. You can observe.instances right here:.