.Vue-email is actually inspired by react-email, it permits our team produce themes utilizing the vue structure, along with parts that assist our team create themes quickly and quickly.To begin utilizing vue-email in any type of vue task, you merely need to mount the package:.With NPM:.$ npm set up vue-email.Along with Anecdote:.$ anecdote add vue-email.With PNPM:.$ pnpm install vue-email.Producing e-mail layout.Make a new e-mail theme in any place you wish to possess your layouts, for this scenario, our team can easily develop a theme file, along with a design template called welcome.vue.src/templates/welcome. vue.
label, invited to vue-email.A Vue element collection for building responsive e-mails.Viewpoint on GitHub.Pleased coding!David Arenas.
Making the themes.Our experts may use the make functionality, it receives 2 params, the first one is the design template to provide, and the 2nd the params to be used for the design template, and then pass the outcome layout in the body system of demand.Passing the design template in the physical body, provide our team the chance of rendering using any sort of hosting server, share, fastify, nuxt in SSR, and so on src/pages/index. vue.Send out e-mail with nodemailer.Dispatched email.
Deliver email.In this example i utilizing nuxt v3 due to the fact that it enables our team to set api inside very own job, and also specify several api routes.Right here our experts only remove the theme of the request body system, and deliver the e-mail passing the layout in the sendMail feature of the nodemailer package deal.src/server/api/ email.post.ts.bring in nodemailer from 'nodemailer'.export nonpayment defineEventHandler( async (activity) => const body = await readBody( event).const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( host: process.env.HOST ).const choices = coming from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hello world',.html: body.template,..wait for transporter.sendMail( options). ).If you are actually certainly not making use of the hosting server in nuxt, you may easily apply on any framework for instance making use of share:.bring reveal coming from 'reveal'.import nodemailer from 'nodemailer'.const application = express().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const layout = req.body.const testAccount = await nodemailer.createTestAccount().const transporter = nodemailer.createTransport( 'smtp.ethereal.email',.port: 587,.secure: false,.auth: customer: testAccount.user,.pass: testAccount.pass,.,. ).const choices = coming from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hey there world',.html: theme,..wait for transporter.sendMail( alternatives).return res.json( message: "Email delivered" ). ).app.listen( 3001 ).Information.Receive the total records [below] ().Parts.You can observe the elements, listed here:.Assimilations.E-mails built along with vue-email can be converted into HTML or.clear text, as well as sent utilizing any sort of e-mail provider. You can easily observe.instances here:.