.Vue-email is encouraged through react-email, it enables us develop templates using the vue framework, along with parts that help us build templates simply and also fast.To start using vue-email in any sort of vue project, you merely need to put in the bundle:.Along with NPM:.$ npm mount vue-email.With Anecdote:.$ yarn incorporate vue-email.With PNPM:.$ pnpm put in vue-email.Generating email theme.Generate a new e-mail theme in everywhere you want to have your templates, for this case, our team may create a design template folder, with a theme contacted welcome.vue.src/templates/welcome. vue.
label, appreciated to vue-email.A Vue part library for building receptive emails.Perspective on GitHub.Delighted coding!David Arenas.
Making the templates.Our experts may use the leave feature, it receives pair of params, the initial one is actually the design template to provide, and also the second the params to become utilized for the layout, and afterwards pass the result design template in the body of request.Passing the layout in the physical body, offer our company the chance of rendering using any type of server, convey, fastify, nuxt in SSR, and so on src/pages/index. vue.Send out e-mail with nodemailer.Delivered e-mail.
Deliver email.In this example i using nuxt v3 given that it enables our company to specify api inside very own job, as well as specify several api options.Here our company merely draw out the theme of the request physical body, and send out the email passing the layout in the sendMail function of the nodemailer bundle.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export nonpayment defineEventHandler( async (event) => const body = wait for readBody( activity).const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.safe: inaccurate,.auth: customer: testAccount.user,.successfully pass: testAccount.pass,.,. ).const choices = from: 'you@example.com',.to: 'user@gmail.com',.topic: 'greetings globe',.html: body.template,..wait for transporter.sendMail( choices). ).If you are not using the server in nuxt, you can conveniently apply on any type of structure as an example utilizing convey:.import share 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 carrier = nodemailer.createTransport( lot: process.env.HOST ).const possibilities = coming from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hey there globe',.html: design template,..wait for transporter.sendMail( choices).profit res.json( information: "Email delivered" ). ).app.listen( 3001 ).Information.Obtain the complete documents [listed below] ().Elements.You can find the parts, listed below:.Assimilations.Emails created along with vue-email can be exchanged HTML or.plain text, as well as delivered using any sort of email provider. You may observe.examples right here:.