.Vue-email is actually motivated through react-email, it enables our company create themes utilizing the vue structure, with components that assist our team create layouts easily and quick.To start using vue-email in any kind of vue job, you simply require to set up the package deal:.Along with NPM:.$ npm put up vue-email.With Anecdote:.$ anecdote include vue-email.With PNPM:.$ pnpm install vue-email.Creating email template.Make a brand new email template in everywhere you desire to possess your themes, for this situation, our company may create a theme folder, along with a template contacted welcome.vue.src/templates/welcome. vue.
title, invited to vue-email.A Vue component public library for property reactive emails.Sight on GitHub.Happy coding!David Arenas.
Providing the design templates.Our experts may use the provide function, it obtains two params, the very first one is actually the theme to make, and the 2nd the params to become utilized for the theme, and afterwards pass the outcome design template in the body of demand.Passing the layout in the physical body, offer our team the chance of rendering utilizing any kind of hosting server, show, fastify, nuxt in SSR, etc src/pages/index. vue.Send e-mail along with nodemailer.Routed email.
Deliver e-mail.In this particular instance i using nuxt v3 because it enables us to set api inside own project, and also determine multiple api courses.Listed here our company merely draw out the theme of the ask for physical body, and also send the e-mail passing the design template in the sendMail functionality of the nodemailer package deal.src/server/api/ email.post.ts.bring in nodemailer coming from 'nodemailer'.export default defineEventHandler( async (activity) => const physical body = await readBody( activity).const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( 'smtp.ethereal.email',.port: 587,.safe: false,.auth: customer: testAccount.user,.pass: testAccount.pass,.,. ).const alternatives = coming from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hey there globe',.html: body.template,..wait for transporter.sendMail( alternatives). ).If you are actually certainly not making use of the web server in nuxt, you may effortlessly execute on any type of platform for example using share:.import convey from 'reveal'.bring in nodemailer coming from 'nodemailer'.const app = share().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const template = req.body.const testAccount = await nodemailer.createTestAccount().const transporter = nodemailer.createTransport( lot: process.env.HOST ).const options = coming from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hello there planet',.html: theme,..await transporter.sendMail( choices).return res.json( information: "Email delivered" ). ).app.listen( 3001 ).Documentation.Acquire the full information [here] ().Parts.You may find the parts, listed below:.Integrations.Emails built with vue-email can be converted into HTML or even.plain text, and also sent out making use of any sort of e-mail company. You can observe.instances here:.