.Vue-email is actually influenced by react-email, it permits our company produce design templates utilizing the vue platform, with elements that help us build templates conveniently as well as quickly.To start utilizing vue-email in any sort of vue project, you simply need to put in the package:.With NPM:.$ npm put in vue-email.With Anecdote:.$ anecdote add vue-email.With PNPM:.$ pnpm install vue-email.Generating email template.Make a brand-new e-mail theme in everywhere you want to possess your design templates, for this instance, our experts may generate a template file, with a layout gotten in touch with welcome.vue.src/templates/welcome. vue.
title, welcome to vue-email.A Vue part public library for property receptive e-mails.Sight on GitHub.Happy coding!David Arenas.
Rendering the design templates.Our team can easily make use of the render feature, it receives 2 params, the 1st one is actually the theme to provide, and also the second the params to be made use of for the template, and then pass the outcome layout in the body system of request.Passing the layout in the body, offer us the chance of rendering making use of any sort of web server, convey, fastify, nuxt in SSR, and so on src/pages/index. vue.Deliver email along with nodemailer.Dispatched email.
Send out e-mail.In this particular example i using nuxt v3 due to the fact that it allows us to establish api inside own project, as well as determine numerous api courses.Listed below our team just extract the template of the ask for body system, and deliver the email passing the layout in the sendMail function of the nodemailer bundle.src/server/api/ email.post.ts.bring in nodemailer coming from 'nodemailer'.export nonpayment defineEventHandler( async (event) => const physical body = await readBody( occasion).const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( bunch: process.env.HOST ).const alternatives = coming from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hello there planet',.html: body.template,..await transporter.sendMail( choices). ).If you are certainly not utilizing the web server in nuxt, you can effortlessly execute on any kind of structure as an example using show:.import share from 'show'.import nodemailer from 'nodemailer'.const application = express().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const theme = req.body.const testAccount = await nodemailer.createTestAccount().const transporter = nodemailer.createTransport( lot: process.env.HOST ).const options = coming from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hi there world',.html: template,..wait for transporter.sendMail( choices).return res.json( information: "Email sent out" ). ).app.listen( 3001 ).Documents.Get the total documents [below] ().Elements.You can see the components, listed here:.Integrations.Emails created along with vue-email could be exchanged HTML or.clear text, and delivered making use of any kind of email service provider. You may see.instances listed here:.