.Vue-email is inspired through react-email, it permits our team make templates utilizing the vue framework, along with components that assist our company build layouts simply and fast.To start using vue-email in any sort of vue job, you just need to mount the bundle:.With NPM:.$ npm install vue-email.Along with Anecdote:.$ anecdote incorporate vue-email.Along with PNPM:.$ pnpm mount vue-email.Creating e-mail layout.Generate a brand-new e-mail design template in anywhere you would like to possess your design templates, for this scenario, we can develop a theme folder, with a theme gotten in touch with welcome.vue.src/templates/welcome. vue.
title, invited to vue-email.A Vue part library for property reactive emails.Scenery on GitHub.Pleased coding!David Arenas.
Leaving the layouts.We can easily use the provide functionality, it acquires two params, the first one is the layout to make, and the 2nd the params to become used for the layout, and afterwards pass the outcome layout in the body system of request.Passing the template in the body system, provide our team the opportunity of making utilizing any kind of web server, reveal, fastify, nuxt in SSR, and so on src/pages/index. vue.Send out e-mail with nodemailer.Directed e-mail.
Send out email.Within this instance i making use of nuxt v3 since it permits us to specify api inside personal project, as well as describe various api routes.Here we simply draw out the theme of the demand physical body, and send the email passing the template 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( event).const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( ).const choices = from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'greetings globe',.html: body.template,..wait for transporter.sendMail( options). ).If you are not using the server in nuxt, you may quickly apply on any type of framework for instance utilizing reveal:.import express coming from 'convey'.import nodemailer from 'nodemailer'.const app = show().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const layout = req.body.const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( bunch: process.env.HOST ).const options = from: 'you@example.com',.to: 'user@gmail.com',.target: 'hello world',.html: template,..await transporter.sendMail( alternatives).gain res.json( information: "Email delivered" ). ).app.listen( 3001 ).Records.Obtain the complete paperwork [listed here] ().Elements.You can easily see the components, listed here:.Integrations.Emails created along with vue-email can be exchanged HTML or.plain text, and sent making use of any email company. You may observe.instances listed below:.