.Vue-email is actually motivated through react-email, it allows us generate design templates using the vue framework, with elements that aid our team construct templates conveniently and also quick.To begin utilizing vue-email in any type of vue venture, you merely need to put in the bundle:.Along with NPM:.$ npm put in vue-email.With Anecdote:.$ yarn include vue-email.With PNPM:.$ pnpm set up vue-email.Producing e-mail layout.Develop a brand new email layout in no matter where you desire to have your templates, for this scenario, we may create a layout folder, with a template contacted welcome.vue.src/templates/welcome. vue.
title, appreciated to vue-email.A Vue part collection for building receptive e-mails.Sight on GitHub.Delighted coding!David Arenas.
Making the layouts.Our experts can easily make use of the render functionality, it gets two params, the first one is the design template to render, as well as the 2nd the params to become made use of for the template, and afterwards pass the result design template in the body of demand.Passing the design template in the body system, provide us the chance of rendering making use of any sort of server, reveal, fastify, nuxt in SSR, and so on src/pages/index. vue.Send out email with nodemailer.Delivered e-mail.
Send out email.In this instance i making use of nuxt v3 considering that it permits us to specify api inside very own job, and specify a number of api courses.Here our experts only extract the design template of the demand body system, as well as deliver the e-mail passing the layout in the sendMail feature of the nodemailer package deal.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export default defineEventHandler( async (occasion) => const body = wait for readBody( event).const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.port: 587,.protected: untrue,.auth: consumer: testAccount.user,.elapsed: testAccount.pass,.,. ).const choices = from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hey there world',.html: body.template,..await transporter.sendMail( alternatives). ).If you are not making use of the web server in nuxt, you can effortlessly implement on any sort of structure for instance making use of convey:.bring show from 'show'.bring in nodemailer from 'nodemailer'.const app = reveal().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const layout = req.body.const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( ).const options = from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hello world',.html: template,..wait for transporter.sendMail( choices).profit res.json( notification: "Email sent" ). ).app.listen( 3001 ).Documents.Acquire the total documents [here] ().Parts.You can easily find the parts, listed here:.Combinations.Emails constructed along with vue-email could be converted into HTML or even.plain text, as well as sent out using any sort of email specialist. You can observe.instances listed here:.