.Vue-email is actually motivated through react-email, it allows our team generate templates making use of the vue structure, with components that assist our company create themes conveniently and also fast.To begin making use of vue-email in any sort of vue project, you simply need to set up the deal:.Along with NPM:.$ npm put in vue-email.Along with Anecdote:.$ anecdote incorporate vue-email.With PNPM:.$ pnpm set up vue-email.Generating email template.Produce a brand-new e-mail theme in anywhere you desire to possess your themes, for this scenario, our team can generate a template file, with a design template phoned welcome.vue.src/templates/welcome. vue.
title, invited to vue-email.A Vue part library for property responsive e-mails.View on GitHub.Satisfied coding!David Arenas.
Rendering the templates.Our team can easily use the provide function, it receives two params, the first one is the layout to make, and also the 2nd the params to be used for the design template, and after that pass the outcome template in the physical body of ask for.Passing the template in the body system, give us the odds of providing using any hosting server, reveal, fastify, nuxt in SSR, etc src/pages/index. vue.Send out email with nodemailer.Posted e-mail.
Send email.In this particular example i using nuxt v3 considering that it enables our team to establish api inside own task, and describe several api paths.Right here we only remove the layout of the ask for body, and also send the e-mail passing the layout in the sendMail function of the nodemailer bundle.src/server/api/ email.post.ts.bring in nodemailer from 'nodemailer'.export default defineEventHandler( async (celebration) => const physical body = await readBody( celebration).const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( ).const alternatives = coming from: 'you@example.com',.to: 'user@gmail.com',.target: 'hello world',.html: body.template,..wait for transporter.sendMail( alternatives). ).If you are not making use of the hosting server in nuxt, you may simply implement on any framework for example using convey:.import convey coming from 'share'.import nodemailer from 'nodemailer'.const app = share().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const layout = req.body.const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( ).const alternatives = from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hey there planet',.html: layout,..wait for transporter.sendMail( alternatives).profit res.json( notification: "Email delivered" ). ).app.listen( 3001 ).Documentation.Acquire the total paperwork [listed below] ().Elements.You may view the elements, listed below:.Combinations.E-mails created along with vue-email may be converted into HTML or even.plain text, and sent utilizing any sort of e-mail provider. You can see.examples right here:.