nuxt-mail

You can define multiple presets by providing an array to the message configuration. Each object in the array can have a name property. You can then trigger a specific configuration using the config key in the .send() method, either by its name or its index in the array.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    ['nuxt-mail', {
      message: [
        { name: 'contact', to: 'contact@foo.de' },
        { name: 'support', to: 'support@foo.de' },
      ],
      // ... smtp config
    }],
  ],
});

// Usage in component
mail.send({
  config: 'support', // or config: 1
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
});

You can install the nuxt-mail module using npx nuxi module add for either npm or Yarn.

# npm
$ npx nuxi module add nuxt-mail

# Yarn
$ yarn nuxi module add nuxt-mail

To use Gmail, you must set up an app-specific password. You can configure it using the service: 'gmail' option or by manually specifying the host and port.

// Option 1: Using service name
export default defineNuxtConfig({
  modules: [
    ['nuxt-mail', {
      smtp: {
        service: 'gmail',
        auth: {
          user: 'foo@gmail.com',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
});

// Option 2: Manual host/port
export default defineNuxtConfig({
  modules: [
    ['nuxt-mail', {
      smtp: {
        host: "smtp.gmail.com",
        port: 587,
        auth: {
          user: 'foo@gmail.com',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
});

If an email fails to send, check the browser developer tools. If a 500 error occurs, inspect the Network tab:

1. Find the send request.
2. Open the request and select the Response tab.
3. The error message (often related to SMTP authentication) will be displayed there.

In the Nuxt Options API, the mail instance is available via this.$mail.

<script>
export default {
  methods: {
    sendEmail() {
      this.$mail.send({
        from: 'John Doe',
        subject: 'Incredible',
        text: 'This is an incredible test message',
      });
    },
  },
};
</script>

In the Nuxt 3 Composition API (<script setup>), use the useMail() composable to access the mail instance and call .send().

<script setup>
const mail = useMail();

mail.send({
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
});
</script>

The MailOptionsInput interface allows for more flexible input when configuring mail, specifically allowing a single Message instead of an array of messages.

• message: Accepts either a single Message or an array of Message[].
• smtp: An SMTPTransport.Options object.

In a Nuxt application, you can access the configured mail instance using the useMail() composable. This provides access to the $mail property injected into the Nuxt app instance by the nuxt-mail module.

import { useMail } from '#imports';

const mail = useMail();
// Use the mail instance to send emails

The MessageWithConfig interface extends the standard SendMailOptions (excluding recipient fields) by adding a config property, which is a number.

When providing input via MessageWithConfigInput, the config property can be either a number or a string.

The MailOptions interface defines the structure for sending mail via the module. It consists of an array of Message objects and an smtp configuration object.

• message: An array of Message objects (Message[]).
• smtp: An SMTPTransport.Options object or null.

const options: MailOptions = {
  message: [
    { to: 'recipient@example.com', subject: 'Subject', text: 'Body' }
  ],
  smtp: {
    host: 'smtp.example.com',
    port: 587,
    secure: false,
    auth: { user: 'user', pass: 'pass' }
  }
};

A Message represents an individual email to be sent. It is based on SendMailOptions from nodemailer and requires at least one recipient field: to, cc, or bcc. You can also optionally provide a name property.

Required fields (at least one):

• to
• cc
• bcc

// Example of a Message object
const message: Message = {
  to: 'user@example.com',
  subject: 'Hello',
  text: 'This is a test message'
};