.Vue-email is actually inspired through react-email, it permits us develop layouts making use of the vue framework, with components that aid us create layouts easily as well as fast.To begin using vue-email in any type of vue venture, you only require to set up the deal:.With NPM:.$ npm mount vue-email.Along with Anecdote:.$ yarn add vue-email.With PNPM:.$ pnpm install vue-email.Generating e-mail theme.Develop a brand new e-mail theme in anywhere you intend to have your design templates, for this scenario, our company can develop a theme file, along with a template contacted welcome.vue.src/templates/welcome. vue.
label, appreciated to vue-email.A Vue part public library for building responsive e-mails.View on GitHub.Happy coding!David Arenas.
Making the design templates.Our experts can easily make use of the leave function, it gets pair of params, the first one is actually the template to leave, and the 2nd the params to become used for the layout, and afterwards pass the end result theme in the body system of demand.Passing the layout in the body system, give our company the opportunity of making using any type of web server, reveal, fastify, nuxt in SSR, and so on src/pages/index. vue.Deliver e-mail with nodemailer.Directed e-mail.
Send email.In this instance i using nuxt v3 given that it permits our team to establish api inside personal task, and also determine a number of api routes.Right here our experts simply draw out the theme of the demand physical body, and send out the email passing the design template in the sendMail function of the nodemailer package deal.src/server/api/ email.post.ts.bring in nodemailer coming from 'nodemailer'.export nonpayment defineEventHandler( async (occasion) => const physical body = wait for readBody( occasion).const testAccount = await nodemailer.createTestAccount().const transporter = nodemailer.createTransport( ).const options = coming from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hi globe',.html: body.template,..wait for transporter.sendMail( choices). ).If you are actually certainly not utilizing the server in nuxt, you may quickly carry out on any platform for instance utilizing convey:.bring reveal coming from 'convey'.bring in nodemailer coming from 'nodemailer'.const app = reveal().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const layout = req.body.const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( ).const options = coming from: 'you@example.com',.to: 'user@gmail.com',.target: 'hello there planet',.html: theme,..wait for transporter.sendMail( choices).return res.json( information: "Email delivered" ). ).app.listen( 3001 ).Information.Acquire the full paperwork [listed below] ().Elements.You can easily observe the parts, listed below:.Integrations.Emails created with vue-email can be exchanged HTML or.clear text, and also delivered utilizing any type of email company. You can easily view.examples right here:.