.Vue-email is actually motivated by react-email, it permits our team create design templates making use of the vue platform, along with elements that aid our company create design templates simply as well as swiftly.To start utilizing vue-email in any sort of vue project, you simply need to set up the plan:.Along with NPM:.$ npm install vue-email.With Anecdote:.$ yarn add vue-email.With PNPM:.$ pnpm install vue-email.Generating email layout.Generate a brand new e-mail layout in wherever you desire to possess your themes, for this case, our company may generate a template file, with a layout gotten in touch with welcome.vue.src/templates/welcome. vue.
name, welcome to vue-email.A Vue component collection for building reactive emails.Viewpoint on GitHub.Happy coding!David Arenas.
Providing the templates.We can utilize the provide functionality, it obtains 2 params, the 1st one is actually the design template to make, and also the second the params to be made use of for the design template, and after that pass the end result layout in the body system of ask for.Passing the layout in the body, offer our team the chance of rendering utilizing any sort of web server, share, fastify, nuxt in SSR, and so on src/pages/index. vue.Deliver email with nodemailer.Shipped email.
Deliver e-mail.In this example i using nuxt v3 considering that it allows our team to specify api inside very own venture, and define numerous api options.Listed here our experts just remove the theme of the demand body, as well as send the e-mail passing the theme in the sendMail function of the nodemailer package deal.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export nonpayment defineEventHandler( async (celebration) => const physical body = await readBody( occasion).const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( host: process.env.HOST ).const choices = from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hey there globe',.html: body.template,..wait for transporter.sendMail( possibilities). ).If you are certainly not using the hosting server in nuxt, you can conveniently execute on any sort of framework for example using express:.bring convey from 'show'.import nodemailer coming from 'nodemailer'.const application = convey().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const template = req.body.const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( ).const choices = coming from: 'you@example.com',.to: 'user@gmail.com',.topic: 'greetings world',.html: design template,..wait for transporter.sendMail( choices).gain res.json( information: "Email delivered" ). ).app.listen( 3001 ).Documentation.Obtain the complete information [right here] ().Parts.You can find the parts, listed below:.Assimilations.Emails constructed with vue-email could be exchanged HTML or.plain text, and sent out utilizing any e-mail company. You can observe.examples right here:.