.Vue-email is actually motivated through react-email, it allows us produce design templates making use of the vue framework, with parts that assist our team construct themes effortlessly and fast.To begin using vue-email in any kind of vue project, you simply require to install the package deal:.With NPM:.$ npm set up vue-email.With Yarn:.$ anecdote include vue-email.With PNPM:.$ pnpm set up vue-email.Creating e-mail layout.Make a brand-new email design template in wherever you wish to have your templates, for this scenario, we can easily make a design template folder, along with a theme phoned welcome.vue.src/templates/welcome. vue.
name, invited to vue-email.A Vue part library for property responsive emails.Scenery on GitHub.Pleased coding!David Arenas.
Providing the design templates.We may make use of the make feature, it obtains two params, the very first one is actually the design template to make, as well as the second the params to become made use of for the design template, and then pass the outcome theme in the physical body of ask for.Passing the theme in the body system, offer us the opportunity of making utilizing any server, share, fastify, nuxt in SSR, etc src/pages/index. vue.Send out e-mail along with nodemailer.Emailed e-mail.
Deliver e-mail.Within this instance i making use of nuxt v3 due to the fact that it allows our team to specify api inside very own project, and also describe a number of api routes.Right here our team just extract the template of the ask for physical body, as well as deliver the email passing the layout in the sendMail feature of the nodemailer package deal.src/server/api/ email.post.ts.bring in nodemailer coming from 'nodemailer'.export default defineEventHandler( async (celebration) => const physical body = await readBody( celebration).const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.secure: false,.auth: individual: testAccount.user,.pass: testAccount.pass,.,. ).const possibilities = coming from: 'you@example.com',.to: 'user@gmail.com',.topic: 'hi world',.html: body.template,..wait for transporter.sendMail( possibilities). ).If you are actually not utilizing the server in nuxt, you may simply implement on any platform as an example making use of express:.import show coming from 'express'.bring in nodemailer from 'nodemailer'.const app = convey().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const template = req.body.const testAccount = wait for nodemailer.createTestAccount().const transporter = nodemailer.createTransport( 'smtp.ethereal.email',.slot: 587,.secure: incorrect,.auth: individual: testAccount.user,.elapsed: testAccount.pass,.,. ).const possibilities = from: 'you@example.com',.to: 'user@gmail.com',.subject matter: 'hey there globe',.html: theme,..wait for transporter.sendMail( options).gain res.json( message: "Email delivered" ). ).app.listen( 3001 ).Information.Obtain the total records [here] ().Elements.You can easily see the parts, listed here:.Combinations.E-mails developed along with vue-email could be exchanged HTML or even.plain text, and sent out using any kind of email company. You may view.examples below:.