.Vue-email is motivated through react-email, it enables our team develop design templates utilizing the vue structure, along with parts that assist us develop layouts effortlessly and swiftly.To start making use of vue-email in any type of vue project, you simply need to have to set up the bundle:.With NPM:.$ npm set up vue-email.With Anecdote:.$ anecdote incorporate vue-email.Along with PNPM:.$ pnpm install vue-email.Producing email template.Create a new email theme in anywhere you would like to have your design templates, for this instance, our experts can produce a layout directory, with a layout gotten in touch with welcome.vue.src/templates/welcome. vue.
name, welcome to vue-email.A Vue part collection for property reactive e-mails.Scenery on GitHub.Delighted coding!David Arenas.
Making the layouts.Our company can easily make use of the leave feature, it gets pair of params, the initial one is actually the layout to leave, and the 2nd the params to be utilized for the design template, and then pass the outcome design template in the physical body of request.Passing the theme in the physical body, offer our company the chance of making using any sort of server, share, fastify, nuxt in SSR, etc src/pages/index. vue.Send e-mail with nodemailer.Dispatched e-mail.
Deliver e-mail.In this example i utilizing nuxt v3 because it permits us to prepare api inside very own venture, and define numerous api options.Here we merely remove the design template of the ask for physical body, and send out the e-mail passing the design template in the sendMail functionality of the nodemailer deal.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export nonpayment defineEventHandler( async (celebration) => const body system = await readBody( celebration).const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( ).const options = from: 'you@example.com',.to: 'user@gmail.com',.target: 'hello there globe',.html: body.template,..await transporter.sendMail( options). ).If you are actually not using the server in nuxt, you may simply execute on any type of structure as an example making use of share:.bring share coming from 'show'.import nodemailer from 'nodemailer'.const app = express().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const template = req.body.const testAccount = wait for nodemailer.createTestAccount().const carrier = nodemailer.createTransport( multitude: process.env.HOST ).const alternatives = coming from: 'you@example.com',.to: 'user@gmail.com',.subject: 'hi planet',.html: layout,..await transporter.sendMail( alternatives).return res.json( notification: "Email delivered" ). ).app.listen( 3001 ).Records.Receive the complete documents [here] ().Elements.You can easily see the elements, listed below:.Integrations.E-mails created along with vue-email could be exchanged HTML or even.plain text, and sent using any kind of email company. You may view.instances below:.