.Vue-email is actually encouraged by react-email, it allows us develop layouts making use of the vue platform, with elements that assist our team create templates simply as well as quickly.To start making use of vue-email in any kind of vue job, you merely need to have to put up the plan:.With NPM:.$ npm put up vue-email.With Yarn:.$ yarn add vue-email.Along with PNPM:.$ pnpm set up vue-email.Making email layout.Produce a new e-mail theme in anywhere you intend to possess your layouts, for this instance, we can create a layout file, with a design template called welcome.vue.src/templates/welcome. vue.
label, appreciated to vue-email.A Vue component public library for property receptive e-mails.Scenery on GitHub.Pleased coding!David Arenas.
Providing the templates.We may use the leave functionality, it acquires pair of params, the first one is the layout to leave, and also the 2nd the params to become used for the template, and after that pass the outcome layout in the physical body of demand.Passing the design template in the body, give our team the opportunity of providing using any web server, share, fastify, nuxt in SSR, and so on src/pages/index. vue.Send out email with nodemailer.Placed e-mail.
Send e-mail.In this particular instance i making use of nuxt v3 given that it permits our team to specify api inside own project, as well as define multiple api routes.Below our team simply draw out the design template of the demand body, and also deliver the email passing the theme in the sendMail feature of the nodemailer package.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export default defineEventHandler( async (celebration) => const body = await readBody( occasion).const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.port: 587,.secure: inaccurate,.auth: customer: testAccount.user,.pass: testAccount.pass,.,. ).const choices = from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hi there world',.html: body.template,..await transporter.sendMail( possibilities). ).If you are certainly not making use of the hosting server in nuxt, you may conveniently carry out on any kind of framework as an example utilizing share:.import convey coming from 'convey'.import nodemailer coming from 'nodemailer'.const application = show().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const theme = req.body.const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( ).const possibilities = coming from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hello there planet',.html: design template,..await transporter.sendMail( possibilities).return res.json( information: "Email sent out" ). ).app.listen( 3001 ).Documentation.Acquire the complete documentation [below] ().Components.You can see the elements, listed below:.Assimilations.E-mails developed with vue-email can be converted into HTML or.plain text, as well as sent utilizing any email service provider. You may see.instances listed below:.