.Vue-email is actually influenced by react-email, it enables us produce themes using the vue structure, with components that assist us create templates easily and also fast.To begin utilizing vue-email in any sort of vue project, you merely need to have to put in the bundle:.With NPM:.$ npm mount vue-email.Along with Yarn:.$ yarn incorporate vue-email.With PNPM:.$ pnpm install vue-email.Generating e-mail design template.Create a brand-new e-mail layout in no matter where you intend to possess your themes, for this case, our team can easily produce a design template file, with a layout gotten in touch with welcome.vue.src/templates/welcome. vue.
title, welcome to vue-email.A Vue element collection for structure receptive e-mails.Viewpoint on GitHub.Pleased coding!David Arenas.
Leaving the layouts.Our company can make use of the leave functionality, it gets 2 params, the first one is actually the design template to leave, and the second the params to become used for the theme, and after that pass the end result layout in the body of demand.Passing the layout in the body, offer our team the possibility of providing utilizing any sort of web server, show, fastify, nuxt in SSR, etc src/pages/index. vue.Send e-mail with nodemailer.Shipped email.
Send out email.In this particular example i making use of nuxt v3 considering that it enables our company to prepare api inside very own project, and also specify multiple api options.Here our experts only remove the theme of the ask for body, and send the e-mail passing the template in the sendMail functionality of the nodemailer package.src/server/api/ email.post.ts.import nodemailer coming from 'nodemailer'.export default defineEventHandler( async (occasion) => const body = await readBody( activity).const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( ).const choices = from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hi world',.html: body.template,..wait for transporter.sendMail( possibilities). ).If you are not utilizing the hosting server in nuxt, you can simply apply on any type of framework for instance utilizing convey:.import share coming from 'show'.import 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( bunch: process.env.HOST ).const options = coming from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hi globe',.html: design template,..wait for transporter.sendMail( alternatives).yield res.json( information: "Email sent out" ). ).app.listen( 3001 ).Documentation.Obtain the full information [listed below] ().Components.You can easily observe the components, listed below:.Combinations.Emails built with vue-email could be converted into HTML or.plain text, and also sent using any email specialist. You can easily see.instances below:.