.Vue-email is actually motivated through react-email, it permits our team generate themes making use of the vue platform, along with parts that help our company build design templates conveniently and swiftly.To start utilizing vue-email in any sort of vue project, you just need to mount the bundle:.With NPM:.$ npm put in vue-email.Along with Anecdote:.$ anecdote add vue-email.With PNPM:.$ pnpm install vue-email.Making e-mail template.Develop a brand new email theme in wherever you wish to possess your design templates, for this instance, our experts can easily develop a template directory, with a theme phoned welcome.vue.src/templates/welcome. vue.
label, invited to vue-email.A Vue component collection for building reactive emails.Scenery on GitHub.Happy coding!David Arenas.
Leaving the layouts.Our team can easily utilize the render function, it receives 2 params, the 1st one is actually the theme to provide, as well as the 2nd the params to be made use of for the template, and then pass the end result template in the body of demand.Passing the template in the body system, provide our company the possibility of making using any kind of web server, share, fastify, nuxt in SSR, and so on src/pages/index. vue.Send e-mail along with nodemailer.Shipped email.
Send out e-mail.In this particular instance i making use of nuxt v3 due to the fact that it permits our company to set api inside own venture, and specify various api courses.Below our team just remove the layout of the ask for physical body, and also send out the email passing the layout in the sendMail function of the nodemailer package deal.src/server/api/ email.post.ts.bring in nodemailer coming from 'nodemailer'.export nonpayment defineEventHandler( async (activity) => const body system = wait for readBody( activity).const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( host: process.env.HOST ).const possibilities = from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hi there world',.html: body.template,..wait for transporter.sendMail( possibilities). ).If you are actually not utilizing the hosting server in nuxt, you may easily apply on any structure as an example using show:.bring convey coming from 'express'.import nodemailer from 'nodemailer'.const app = convey().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const template = req.body.const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( multitude: process.env.HOST ).const possibilities = coming from: 'you@example.com',.to: 'user@gmail.com',.topic: 'greetings globe',.html: template,..wait for transporter.sendMail( possibilities).gain res.json( information: "Email sent" ). ).app.listen( 3001 ).Paperwork.Receive the complete documentation [listed here] ().Parts.You can view the parts, listed here:.Integrations.Emails built along with vue-email could be converted into HTML or.clear text, as well as sent out utilizing any e-mail service provider. You may observe.instances right here:.