.Vue-email is actually motivated by react-email, it permits us generate layouts making use of the vue structure, along with elements that assist us develop layouts effortlessly and also quick.To begin using vue-email in any vue project, you only require to set up the plan:.Along with NPM:.$ npm mount vue-email.With Anecdote:.$ yarn include vue-email.With PNPM:.$ pnpm set up vue-email.Producing e-mail template.Produce a brand-new e-mail template in wherever you desire to possess your themes, for this instance, our team can easily create a design template folder, along with a layout called welcome.vue.src/templates/welcome. vue.
name, appreciated to vue-email.A Vue element public library for building receptive emails.Sight on GitHub.Delighted coding!David Arenas.
Leaving the templates.Our experts can utilize the leave functionality, it gets two params, the initial one is the layout to provide, and also the 2nd the params to become utilized for the layout, and afterwards pass the result design template in the body of request.Passing the design template in the physical body, offer our team the odds of rendering making use of any kind of server, share, fastify, nuxt in SSR, etc src/pages/index. vue.Deliver email along with nodemailer.Delivered e-mail.
Send out e-mail.In this particular example i making use of nuxt v3 due to the fact that it permits us to prepare api inside own venture, as well as define multiple api options.Here our team merely remove the template of the demand body, as well as send the email passing the theme in the sendMail feature of the nodemailer bundle.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export default defineEventHandler( async (occasion) => const body = await readBody( celebration).const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( 'smtp.ethereal.email',.port: 587,.safe: misleading,.auth: individual: testAccount.user,.successfully pass: testAccount.pass,.,. ).const choices = coming from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hi planet',.html: body.template,..await transporter.sendMail( alternatives). ).If you are certainly not utilizing the hosting server in nuxt, you may easily implement on any type of platform as an example utilizing reveal:.bring share coming from 'reveal'.bring in nodemailer coming from 'nodemailer'.const app = convey().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const theme = req.body.const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( host: process.env.HOST ).const options = from: 'you@example.com',.to: 'user@gmail.com',.target: 'greetings world',.html: template,..await transporter.sendMail( alternatives).return res.json( information: "Email sent out" ). ).app.listen( 3001 ).Documents.Acquire the full records [listed here] ().Components.You can find the components, listed below:.Assimilations.Emails developed with vue-email may be converted into HTML or even.plain text, as well as delivered utilizing any sort of email company. You can easily find.examples below:.