nuxt-mail

    3.0.10 • Public • Published

    nuxt-mail

    npm version Linux macOS Windows compatible Build status Coverage status Dependency status Renovate enabled
    Open in Gitpod Buy Me a Coffee PayPal Patreon

    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',
    })

    Note about production use

    When you use nuxt-mail in production and you configured a reverse proxy that hides your localhost behind a domain, you need to tell @nuxt/axios which base URL you are using. Otherwise nuxt-mail won't find the send route. Refer to @nuxt/axios options on how to do that. The easiest option is to set the API_URL environment variable, or set something else in your nuxt.config.js:

    // nuxt.config.js
    
    export default {
      axios: {
        baseURL: process.env.BASE_URL,
      },
    }

    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:

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

    Thanks a lot for your support! ❤️

    See also

    • nuxt-route-meta: Adds Nuxt page data to route meta at build time.
    • nuxt-modernizr: Adds a Modernizr build to your Nuxt.js app.
    • nuxt-mermaid-string: Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
    • nuxt-content-git: Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.
    • nuxt-babel-runtime: Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.

    License

    MIT License © Sebastian Landwehr

    Install

    npm i nuxt-mail

    DownloadsWeekly Downloads

    326

    Version

    3.0.10

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar