.Vue-email is actually inspired by react-email, it enables our company produce layouts utilizing the vue structure, with elements that aid us create templates conveniently and swiftly.To begin utilizing vue-email in any type of vue venture, you only require to mount the package:.Along with NPM:.$ npm install vue-email.With Anecdote:.$ anecdote incorporate vue-email.With PNPM:.$ pnpm put in vue-email.Developing email theme.Create a brand-new e-mail theme in wherever you want to have your templates, for this case, our company can produce a design template folder, with a template gotten in touch with welcome.vue.src/templates/welcome. vue.
title, invited to vue-email.A Vue part collection for property receptive emails.Perspective on GitHub.Happy coding!David Arenas.
Making the templates.Our team can use the render functionality, it obtains pair of params, the first one is the design template to leave, as well as the second the params to become made use of for the layout, and after that pass the outcome theme in the body system of request.Passing the design template in the body, offer our company the odds of providing using any sort of web server, convey, fastify, nuxt in SSR, and so on src/pages/index. vue.Send out e-mail along with nodemailer.Dispatched email.
Deliver email.Within this example i making use of nuxt v3 due to the fact that it allows our team to prepare api inside very own job, as well as specify several api options.Right here our experts merely draw out the theme of the request physical body, as well as send out the email passing the template in the sendMail feature of the nodemailer bundle.src/server/api/ email.post.ts.bring in nodemailer coming from 'nodemailer'.export default defineEventHandler( async (event) => const physical body = await readBody( activity).const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.port: 587,.safe: inaccurate,.auth: consumer: testAccount.user,.pass: testAccount.pass,.,. ).const options = coming from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hello world',.html: body.template,..wait for transporter.sendMail( choices). ).If you are actually certainly not making use of the hosting server in nuxt, you may conveniently execute on any kind of structure as an example making use of share:.import share coming from 'express'.import nodemailer coming from 'nodemailer'.const app = share().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( lot: process.env.HOST ).const possibilities = coming from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hello world',.html: layout,..wait for transporter.sendMail( options).profit res.json( message: "Email delivered" ). ).app.listen( 3001 ).Documentation.Receive the full documentation [listed here] ().Components.You can view the parts, listed here:.Assimilations.Emails developed with vue-email may be exchanged HTML or.clear text, and sent out utilizing any e-mail provider. You may view.examples listed below:.