.Vue-email is influenced by react-email, it enables our team make themes making use of the vue framework, along with components that assist us develop design templates conveniently and fast.To start utilizing vue-email in any sort of vue venture, you just require to install the deal:.Along with NPM:.$ npm put up vue-email.With Yarn:.$ yarn add vue-email.Along with PNPM:.$ pnpm install vue-email.Creating email template.Generate a brand-new email theme in everywhere you desire to possess your themes, for this case, we can develop a theme folder, along with a design template phoned welcome.vue.src/templates/welcome. vue.
name, welcome to vue-email.A Vue component public library for property receptive e-mails.Sight on GitHub.Happy coding!David Arenas.
Making the themes.Our company can easily make use of the leave feature, it receives pair of params, the initial one is actually the layout to provide, and also the second the params to become made use of for the design template, and then pass the result design template in the physical body of request.Passing the design template in the physical body, provide our company the chance of making utilizing any kind of server, convey, fastify, nuxt in SSR, etc src/pages/index. vue.Send e-mail along with nodemailer.Mailed e-mail.
Deliver e-mail.In this example i making use of nuxt v3 considering that it enables us to set api inside very own venture, and describe a number of api options.Below we just extract the design template of the request physical body, and send out the email passing the theme in the sendMail function of the nodemailer package deal.src/server/api/ email.post.ts.bring in nodemailer from 'nodemailer'.export default defineEventHandler( async (activity) => const physical body = await readBody( celebration).const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( ).const alternatives = from: 'you@example.com',.to: 'user@gmail.com',.topic: 'greetings world',.html: body.template,..wait for transporter.sendMail( alternatives). ).If you are actually not using the hosting server in nuxt, you may effortlessly implement on any type of platform for example using show:.bring share coming from 'convey'.bring in nodemailer from 'nodemailer'.const application = express().app.use( express.json()).app.post('/ api/send-email', async (req, res) => const design template = req.body.const testAccount = await nodemailer.createTestAccount().const carrier = nodemailer.createTransport( 'smtp.ethereal.email',.port: 587,.safe: false,.auth: individual: testAccount.user,.pass: testAccount.pass,.,. ).const choices = from: 'you@example.com',.to: 'user@gmail.com',.target: 'hello there world',.html: design template,..wait for transporter.sendMail( choices).yield res.json( notification: "Email delivered" ). ).app.listen( 3001 ).Documentation.Get the complete information [listed below] ().Elements.You may find the elements, listed below:.Integrations.Emails developed with vue-email may be converted into HTML or.plain text, and delivered utilizing any type of email specialist. You can view.instances listed here:.