.Vue-email is actually encouraged by react-email, it permits our team make templates making use of the vue framework, along with elements that assist our company build design templates simply as well as fast.To begin using vue-email in any kind of vue task, you only need to have to put up the package:.Along with NPM:.$ npm put in vue-email.With Anecdote:.$ anecdote add vue-email.With PNPM:.$ pnpm set up vue-email.Producing email design template.Produce a brand-new e-mail layout in no matter where you desire to possess your design templates, for this situation, our experts can easily develop a layout directory, along with a layout phoned welcome.vue.src/templates/welcome. vue.
title, welcome to vue-email.A Vue part library for property responsive e-mails.View on GitHub.Delighted coding!David Arenas.
Making the themes.We can use the provide functionality, it gets pair of params, the very first one is actually the template to leave, and the 2nd the params to be used for the template, and afterwards pass the end result template in the physical body of demand.Passing the layout in the body, offer our company the possibility of leaving using any hosting server, share, fastify, nuxt in SSR, and so on src/pages/index. vue.Send out email along with nodemailer.Shipped email.
Deliver e-mail.In this example i using nuxt v3 because it allows our company to prepare api inside personal job, and describe a number of api routes.Right here we only extract the theme of the request body, and send 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 default defineEventHandler( async (occasion) => const body = wait for readBody( celebration).const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( multitude: process.env.HOST ).const choices = from: 'you@example.com',.to: 'user@gmail.com',.target: 'hello world',.html: body.template,..await transporter.sendMail( options). ).If you are actually certainly not utilizing the hosting server in nuxt, you may easily implement on any kind of platform as an example utilizing show:.bring show from 'convey'.bring in nodemailer coming from 'nodemailer'.const application = convey().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const design template = req.body.const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.safe and secure: inaccurate,.auth: customer: testAccount.user,.elapsed: testAccount.pass,.,. ).const choices = coming from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hi there world',.html: design template,..await transporter.sendMail( alternatives).yield res.json( notification: "Email sent out" ). ).app.listen( 3001 ).Documents.Receive the full documentation [listed here] ().Elements.You can easily see the components, listed below:.Combinations.Emails developed with vue-email could be exchanged HTML or.clear text, and also sent out making use of any type of e-mail service provider. You may view.examples below:.