.Vue-email is encouraged by react-email, it allows us create templates making use of the vue framework, with components that assist us build layouts conveniently and swiftly.To begin making use of vue-email in any sort of vue venture, you simply need to set up the plan:.Along with NPM:.$ npm put in vue-email.With Anecdote:.$ yarn add vue-email.Along with PNPM:.$ pnpm set up vue-email.Generating e-mail theme.Make a brand new email design template in anywhere you intend to possess your layouts, for this case, our team may generate a theme file, along with a theme phoned welcome.vue.src/templates/welcome. vue.
name, welcome to vue-email.A Vue component public library for structure receptive emails.View on GitHub.Pleased coding!David Arenas.
Rendering the themes.Our experts can easily utilize the leave functionality, it obtains two params, the initial one is the template to render, and also the 2nd the params to be made use of for the layout, and after that pass the outcome design template in the physical body of demand.Passing the design template in the physical body, offer our team the chance of providing making use of any hosting server, convey, fastify, nuxt in SSR, and so on src/pages/index. vue.Send e-mail along with nodemailer.Routed e-mail.
Send out e-mail.In this particular example i making use of nuxt v3 since it allows our team to specify api inside own job, as well as specify numerous api routes.Listed here our company only remove the template of the request body, as well as deliver the email passing the template in the sendMail function of the nodemailer deal.src/server/api/ email.post.ts.import nodemailer from 'nodemailer'.export nonpayment defineEventHandler( async (celebration) => const body = await readBody( activity).const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.safe and secure: untrue,.auth: user: testAccount.user,.pass: testAccount.pass,.,. ).const possibilities = coming from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hello there world',.html: body.template,..await transporter.sendMail( alternatives). ).If you are not utilizing the hosting server in nuxt, you may easily apply on any sort of platform for example making use of convey:.import 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 template = req.body.const testAccount = await nodemailer.createTestAccount().const transporter = nodemailer.createTransport( ).const alternatives = from: 'you@example.com',.to: 'user@gmail.com',.target: 'hi world',.html: template,..await transporter.sendMail( options).return res.json( information: "Email sent" ). ).app.listen( 3001 ).Information.Get the full documentation [listed here] ().Parts.You may observe the parts, listed below:.Integrations.Emails built with vue-email can be converted into HTML or.plain text, and delivered making use of any e-mail specialist. You can easily find.examples listed here:.