.Vue-email is actually motivated by react-email, it permits us produce themes using the vue platform, with components that aid us develop design templates simply and quickly.To start using vue-email in any kind of vue project, you only require to mount the deal:.With NPM:.$ npm install vue-email.Along with Anecdote:.$ yarn include vue-email.With PNPM:.$ pnpm mount vue-email.Developing email layout.Produce a brand-new email template in any place you intend to have your layouts, for this situation, we may create a theme file, with a theme called welcome.vue.src/templates/welcome. vue.
title, invited to vue-email.A Vue element collection for building reactive e-mails.Sight on GitHub.Satisfied coding!David Arenas.
Leaving the themes.We can easily utilize the leave function, it obtains pair of params, the initial one is actually the layout to leave, and the second the params to be made use of for the design template, and afterwards pass the end result layout in the body system of ask for.Passing the theme in the physical body, provide our team the possibility of rendering making use of any type of hosting server, show, fastify, nuxt in SSR, etc src/pages/index. vue.Send out email along with nodemailer.Emailed email.
Deliver e-mail.In this particular instance i using nuxt v3 due to the fact that it allows our team to set api inside personal venture, and also define a number of api routes.Listed here our company simply extract the design template of the demand body, as well as send the e-mail passing the template in the sendMail functionality of the nodemailer deal.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export nonpayment defineEventHandler( async (activity) => const physical body = wait for readBody( celebration).const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.safe and secure: untrue,.auth: customer: testAccount.user,.pass: testAccount.pass,.,. ).const choices = coming from: 'you@example.com',.to: 'user@gmail.com',.target: 'hi there planet',.html: body.template,..await transporter.sendMail( choices). ).If you are certainly not using the server in nuxt, you can conveniently apply on any type of framework for instance utilizing convey:.bring express coming from 'express'.bring in nodemailer from 'nodemailer'.const application = express().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const theme = req.body.const testAccount = await nodemailer.createTestAccount().const transporter = nodemailer.createTransport( ).const alternatives = from: 'you@example.com',.to: 'user@gmail.com',.target: 'hey there planet',.html: template,..await transporter.sendMail( options).profit res.json( message: "Email sent" ). ).app.listen( 3001 ).Documents.Get the full records [right here] ().Components.You can easily find the elements, listed here:.Assimilations.Emails built along with vue-email could be exchanged HTML or even.clear text, and sent out utilizing any sort of email service provider. You can view.examples listed below:.