More Premium Hugo Themes Premium Nuxt Themes

Nuxt Mail

Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.

Nuxt Mail

Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.

Author Avatar Theme by dword-design
Github Stars Github Stars: 313
Last Commit Last Commit: Jan 5, 2026 -
First Commit Created: Dec 18, 2023 -
Nuxt Mail screenshot

Overview:

The nuxt-mail module adds email sending capability to a Nuxt.js app. It creates a server route, provides an injected variable, and uses nodemailer to send emails. However, it does not work for static sites generated with Nuxt.js.

Features:

  • Server Route: Creates a server route for sending emails.
  • Injected Variable: Injects the $mail variable for sending emails.
  • Nodemailer Integration: Uses nodemailer to send emails.

Installation:

To install the nuxt-mail module, follow these steps:

  1. Add the module to the modules array in your nuxt.config.js file:
modules: [
  'nuxt-mail',
],
  1. Make sure to add it to the modules array and not the buildModules array.

  2. Provide the required SMTP options in the module configuration, passed directly to nodemailer. Refer to the nodemailer documentation for available options.

  3. Configure the message config by providing at least a to, cc, or bcc property. This is for security reasons to prevent clients from sending emails to arbitrary recipients. You can also preconfigure the message with a default subject or from address.

  4. The module injects the $mail variable, which can be used to send emails.

For Nuxt 2, additional steps are required:

  1. Install @nuxtjs/axios and add it to the modules array before nuxt-mail.

  2. Use the injected variable like this:

this.$mail.send({
  to: 'example@example.com',
  subject: 'Hello',
  text: 'This is a test email',
});

Note: When using nuxt-mail in production with a configured reverse proxy hiding localhost behind a domain, make sure to set the base URL for @nuxt/axios. Refer to @nuxt/axios options for more details.

If you want to provide multiple message configurations, you can change the message config to an array and reference the config either by name or index.

Summary:

The nuxt-mail module adds email sending capabilities to a Nuxt.js app by creating a server route and providing an injected variable for sending emails. It uses nodemailer for email sending and requires configuration of SMTP options and message properties. The module does not work for static sites generated with Nuxt.js. It also provides instructions for setting up popular email services like Gmail and debugging mail errors.