.Vue-email is motivated by react-email, it enables us make themes using the vue platform, along with parts that help our team develop templates easily and also quickly.To start using vue-email in any kind of vue venture, you merely require to put in the package deal:.With NPM:.$ npm set up vue-email.Along with Anecdote:.$ anecdote add vue-email.Along with PNPM:.$ pnpm put in vue-email.Producing e-mail layout.Develop a new e-mail template in any place you want to possess your templates, for this scenario, our team can make a theme directory, with a theme called welcome.vue.src/templates/welcome. vue.
name, welcome to vue-email.A Vue part collection for structure responsive emails.Viewpoint on GitHub.Happy coding!David Arenas.
Providing the layouts.Our team can easily utilize the provide functionality, it receives two params, the 1st one is actually the layout to leave, as well as the 2nd the params to be utilized for the template, and after that pass the result layout in the physical body of request.Passing the design template in the body, give our company the odds of rendering making use of any sort of web server, convey, fastify, nuxt in SSR, etc src/pages/index. vue.Send e-mail with nodemailer.Directed e-mail.
Send e-mail.In this example i making use of nuxt v3 due to the fact that it allows our company to establish api inside personal venture, as well as describe several api paths.Listed below our team simply remove the layout of the ask for body system, as well as deliver the email passing the theme in the sendMail function of the nodemailer package deal.src/server/api/ email.post.ts.import nodemailer from 'nodemailer'.export nonpayment defineEventHandler( async (activity) => const body = await readBody( event).const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( multitude: process.env.HOST ).const possibilities = coming from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hi planet',.html: body.template,..await transporter.sendMail( options). ).If you are certainly not using the server in nuxt, you can conveniently carry out on any platform as an example making use of express:.import convey coming from 'express'.import nodemailer coming 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 transporter = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.safe: inaccurate,.auth: individual: testAccount.user,.successfully pass: testAccount.pass,.,. ).const options = from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hi world',.html: design template,..wait for transporter.sendMail( options).profit res.json( information: "Email sent" ). ).app.listen( 3001 ).Paperwork.Get the complete records [below] ().Parts.You can easily see the components, listed below:.Combinations.Emails developed with vue-email may be converted into HTML or even.clear text, and sent out using any email provider. You can easily view.examples listed below:.