.Vue-email is influenced by react-email, it permits us produce layouts using the vue framework, along with elements that aid our team build layouts conveniently and fast.To begin using vue-email in any type of vue task, you just need to have to put in the bundle:.Along with NPM:.$ npm put up vue-email.With Anecdote:.$ yarn incorporate vue-email.With PNPM:.$ pnpm put in vue-email.Generating email template.Generate a brand new email theme in any place you wish to have your themes, for this case, our team can easily make a layout directory, along with a theme contacted welcome.vue.src/templates/welcome. vue.
label, invited to vue-email.A Vue component library for building reactive emails.Viewpoint on GitHub.Delighted coding!David Arenas.
Leaving the themes.Our team can utilize the leave function, it receives two params, the first one is actually the template to provide, and the 2nd the params to become utilized for the theme, and then pass the end result design template in the physical body of ask for.Passing the layout in the physical body, offer us the odds of providing utilizing any sort of hosting server, share, fastify, nuxt in SSR, and so on src/pages/index. vue.Send email with nodemailer.Mailed e-mail.
Send email.Within this example i utilizing nuxt v3 due to the fact that it permits our team to specify api inside own project, as well as determine multiple api courses.Here our company simply extract the design template of the demand body system, and send the email passing the template in the sendMail function of the nodemailer bundle.src/server/api/ email.post.ts.bring in nodemailer coming from 'nodemailer'.export default defineEventHandler( async (occasion) => const body system = wait for readBody( activity).const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.secure: untrue,.auth: consumer: testAccount.user,.pass: testAccount.pass,.,. ).const alternatives = from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hello there globe',.html: body.template,..wait for transporter.sendMail( options). ).If you are actually not making use of the hosting server in nuxt, you can conveniently apply on any platform for example using express:.bring show from 'share'.bring in nodemailer from 'nodemailer'.const app = show().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( ).const possibilities = from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hey there world',.html: theme,..wait for transporter.sendMail( choices).gain res.json( message: "Email delivered" ). ).app.listen( 3001 ).Documents.Obtain the full paperwork [listed here] ().Components.You can see the parts, listed here:.Integrations.Emails created along with vue-email may be converted into HTML or even.clear text, and sent out making use of any type of email company. You may observe.examples listed below:.