.Vue-email is influenced by react-email, it enables our team create layouts making use of the vue framework, along with elements that help our company construct templates simply and also quickly.To begin making use of vue-email in any sort of vue job, you simply require to install the bundle:.Along with NPM:.$ npm install vue-email.Along with Anecdote:.$ yarn incorporate vue-email.With PNPM:.$ pnpm set up vue-email.Making email design template.Generate a brand-new email layout in wherever you wish to have your themes, for this scenario, our experts can develop a theme file, with a layout contacted welcome.vue.src/templates/welcome. vue.
name, appreciated to vue-email.A Vue element collection for building reactive e-mails.Scenery on GitHub.Satisfied coding!David Arenas.
Rendering the design templates.Our team may use the provide function, it gets pair of params, the initial one is actually the layout to make, and also the 2nd the params to become used for the design template, and after that pass the result layout in the body system of ask for.Passing the theme in the body system, offer our team the opportunity of providing utilizing any kind of server, convey, fastify, nuxt in SSR, etc src/pages/index. vue.Deliver email with nodemailer.Placed email.
Send e-mail.In this instance i using nuxt v3 considering that it allows our team to prepare api inside very own job, and also define several api routes.Below we simply extract the template of the ask for physical body, as well as send out the e-mail passing the layout in the sendMail feature of the nodemailer package deal.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export default defineEventHandler( async (occasion) => const body = wait for readBody( celebration).const testAccount = await nodemailer.createTestAccount().const transporter = nodemailer.createTransport( ).const possibilities = coming from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hello globe',.html: body.template,..wait for transporter.sendMail( options). ).If you are certainly not utilizing the server in nuxt, you may easily implement on any kind of structure as an example making use of express:.import show 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( host: process.env.HOST ).const choices = coming from: 'you@example.com',.to: 'user@gmail.com',.target: 'hi there planet',.html: template,..await transporter.sendMail( alternatives).yield res.json( notification: "Email sent out" ). ).app.listen( 3001 ).Information.Acquire the total paperwork [listed here] ().Elements.You may observe the parts, listed here:.Assimilations.E-mails built along with vue-email can be exchanged HTML or even.clear text, and sent making use of any kind of e-mail specialist. You can find.instances here:.