nuxt-mail

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

Does not work for static sites (via nuxt generate) because the module creates a server route.

Install

# npm
$ npm install nuxt-mail

# Yarn
$ yarn add nuxt-mail

Usage

Add the module to your nuxt.config.js. We also have to install the @nuxtjs/axios module because it is used internally to call the server route:

export default {
  modules: [
    '@nuxtjs/axios',
    ['nuxt-mail', {
      message: {
        to: 'foo@bar.de',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    }],
  ],
  // or use the top-level option:
  mail: {
    message: {
      to: 'foo@bar.de',
    },
    smtp: {
      host: "smtp.example.com",
      port: 587,
    },
  },
}

The smtp options are required and directly passed to nodemailer. Refer to their documentation for available options. Also, you have to pass at least to, cc or bcc via the message config. This has security reasons, this way the client cannot send emails from your SMTP server to arbitrary recipients. You can actually preconfigure the message via the message config, so if you always want to send emails with the same subject or from address, you can configure them here.

The module injects the $mail variable, which we now use to send emails:

// Inside a component
this.$mail.send({
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

You can also directly call the generated /mail/send post route:

// Inside a component
this.$axios.$post('/mail/send', {
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

Note that the data are passed to nodemailer. Refer to the documentation for available config options.

Multiple Message Configs

It is also possible to provide multiple message configurations by changing the message config into an array.

export default {
  modules: [
    '@nuxtjs/axios',
    ['nuxt-mail', {
      message: [
        { name: 'contact', to: 'contact@foo.de' },
        { name: 'support', to: 'support@foo.de' },
      ],
      ...
    }],
  ],
}

Then you can reference the config like this:

this.$axios.$post('/mail/send', {
  config: 'support',
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

Or via index (in which case you do not need the name property):

this.$axios.$post('/mail/send', {
  config: 1, // resolves to 'support'
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

 If you want to send me a one time donation. The coffee is pretty good 😊.
 Also for one time donations if you like PayPal.
 Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

License

MIT License © Sebastian Landwehr