{"id":13809755,"url":"https://github.com/dword-design/nuxt-mail","last_synced_at":"2025-05-15T09:05:47.813Z","repository":{"id":43043966,"uuid":"288746593","full_name":"dword-design/nuxt-mail","owner":"dword-design","description":"Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.","archived":false,"fork":false,"pushed_at":"2025-04-28T01:15:59.000Z","size":3891,"stargazers_count":281,"open_issues_count":24,"forks_count":20,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-28T02:24:46.269Z","etag":null,"topics":["email","express","frontend","inject","javascript","mail","nodemailer","npm","npm-package","nuxt","nuxt-module","nuxtjs","nuxtjs-module","server","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dword-design.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"custom":["buymeacoffee.com/dword","paypal.me/SebastianLandwehr"],"github":"dword-design","patreon":"dworddesign"}},"created_at":"2020-08-19T13:59:05.000Z","updated_at":"2025-04-23T20:15:40.000Z","dependencies_parsed_at":"2023-09-24T07:44:03.531Z","dependency_job_id":"8dc226e4-4b50-4967-b032-5ee5addd1d39","html_url":"https://github.com/dword-design/nuxt-mail","commit_stats":{"total_commits":308,"total_committers":13,"mean_commits":"23.692307692307693","dds":0.6753246753246753,"last_synced_commit":"ce5d35af3093d47fca2a73d487d678536cebb289"},"previous_names":[],"tags_count":100,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-mail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-mail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-mail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-mail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dword-design","download_url":"https://codeload.github.com/dword-design/nuxt-mail/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310513,"owners_count":22049468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["email","express","frontend","inject","javascript","mail","nodemailer","npm","npm-package","nuxt","nuxt-module","nuxtjs","nuxtjs-module","server","webdevelopment"],"created_at":"2024-08-04T02:00:35.562Z","updated_at":"2025-05-15T09:05:47.789Z","avatar_url":"https://github.com/dword-design.png","language":"JavaScript","funding_links":["buymeacoffee.com/dword","paypal.me/SebastianLandwehr","https://github.com/sponsors/dword-design","https://patreon.com/dworddesign","https://www.buymeacoffee.com/dword","https://paypal.me/SebastianLandwehr","https://www.patreon.com/dworddesign"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003c!-- TITLE/ --\u003e\n# nuxt-mail\n\u003c!-- /TITLE --\u003e\n\n\u003c!-- BADGES/ --\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://npmjs.org/package/nuxt-mail\"\u003e\n      \u003cimg\n        src=\"https://img.shields.io/npm/v/nuxt-mail.svg\"\n        alt=\"npm version\"\n      \u003e\n    \u003c/a\u003e\u003cimg src=\"https://img.shields.io/badge/os-linux%20%7C%C2%A0macos%20%7C%C2%A0windows-blue\" alt=\"Linux macOS Windows compatible\"\u003e\u003ca href=\"https://github.com/dword-design/nuxt-mail/actions\"\u003e\n      \u003cimg\n        src=\"https://github.com/dword-design/nuxt-mail/workflows/build/badge.svg\"\n        alt=\"Build status\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://codecov.io/gh/dword-design/nuxt-mail\"\u003e\n      \u003cimg\n        src=\"https://codecov.io/gh/dword-design/nuxt-mail/branch/master/graph/badge.svg\"\n        alt=\"Coverage status\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://david-dm.org/dword-design/nuxt-mail\"\u003e\n      \u003cimg src=\"https://img.shields.io/david/dword-design/nuxt-mail\" alt=\"Dependency status\"\u003e\n    \u003c/a\u003e\u003cimg src=\"https://img.shields.io/badge/renovate-enabled-brightgreen\" alt=\"Renovate enabled\"\u003e\u003cbr/\u003e\u003ca href=\"https://gitpod.io/#https://github.com/dword-design/nuxt-mail\"\u003e\n      \u003cimg\n        src=\"https://gitpod.io/button/open-in-gitpod.svg\"\n        alt=\"Open in Gitpod\"\n        width=\"114\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://www.buymeacoffee.com/dword\"\u003e\n      \u003cimg\n        src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\"\n        alt=\"Buy Me a Coffee\"\n        width=\"114\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://paypal.me/SebastianLandwehr\"\u003e\n      \u003cimg\n        src=\"https://sebastianlandwehr.com/images/paypal.svg\"\n        alt=\"PayPal\"\n        width=\"163\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://www.patreon.com/dworddesign\"\u003e\n      \u003cimg\n        src=\"https://sebastianlandwehr.com/images/patreon.svg\"\n        alt=\"Patreon\"\n        width=\"163\"\n      \u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- /BADGES --\u003e\n\n\u003c!-- DESCRIPTION/ --\u003e\nAdds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.\n\u003c!-- /DESCRIPTION --\u003e\n\nDoes not work for static sites (via `nuxt generate`) because the module creates a server route.\n\nℹ️ **Info:** This module has been built in Nuxt 2 time where it was extra effort to build server routes. With Nuxt 3 it got much easier to do so, so this module is basically for simple contact forms. If you want to build more complex stuff, I recommend to use [nodemailer](https://www.npmjs.com/package/nodemailer) directly or [nuxt-nodemailer](https://www.npmjs.com/package/nuxt-nodemailer) instead.\n\n\u003c!-- INSTALL/ --\u003e\n## Install\n\n```bash\n# npm\n$ npx nuxi module add nuxt-mail\n\n# Yarn\n$ yarn nuxi module add nuxt-mail\n```\n\u003c!-- /INSTALL --\u003e\n\n## Configuration\n\nAdd the module to the `modules` array in your `nuxt.config.js`. Note to add it to `modules` instead of `buildModules`, otherwise the server route will not be generated.\n\n```js\n// nuxt.config.js\nexport default {\n  modules: [\n    ['nuxt-mail', {\n      message: {\n        to: 'foo@bar.de',\n      },\n      smtp: {\n        host: \"smtp.example.com\",\n        port: 587,\n      },\n    }],\n  ],\n  // or use the top-level option:\n  mail: {\n    message: {\n      to: 'foo@bar.de',\n    },\n    smtp: {\n      host: \"smtp.example.com\",\n      port: 587,\n    },\n  },\n  // or use runtimeConfig\n  runtimeConfig: {\n    mail: {\n      message: {\n        to: 'foo@bar.de',\n      },\n      smtp: {\n        host: \"smtp.example.com\",\n        port: 587,\n      },\n    },\n  },\n}\n```\n\nThe `smtp` options are required and directly passed to [nodemailer](https://nodemailer.com/smtp/). 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.\n\nThe module injects the `$mail` variable, which we now use to send emails:\n\n## Nuxt 3\n\n### Via composable\n\n```html\n\u003cscript setup\u003e\nconst mail = useMail()\n\nmail.send({\n  from: 'John Doe',\n  subject: 'Incredible',\n  text: 'This is an incredible test message',\n})\n\u003c/script\u003e\n```\n\n### Via injected variable\n\n```html\n\u003cscript setup\u003e\nconst { $mail } = useNuxtApp()\n\n$mail.send({\n  from: 'John Doe',\n  subject: 'Incredible',\n  text: 'This is an incredible test message',\n})\n\u003c/script\u003e\n```\n\n### Via Options API\n\n```html\n\u003cscript\u003e\nexport default {\n  methods: {\n    sendEmail() {\n      this.$mail.send({\n        from: 'John Doe',\n        subject: 'Incredible',\n        text: 'This is an incredible test message',\n      })\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n## Nuxt 2\n\nFor Nuxt 2, you need to install [@nuxtjs/axios](https://www.npmjs.com/package/@nuxtjs/axios) and add it to your module list before `nuxt-mail`:\n\n```js\n// nuxt.config.js\nexport default {\n  modules: [\n    [\n      '@nuxtjs/axios',\n      ['nuxt-mail', { /* ... */ }],\n    }],\n  ],\n}\n```\n\nThen you can use the injected variable like so:\n\n```html\n\u003cscript\u003e\nexport default {\n  methods: {\n    sendEmail() {\n      this.$mail.send({\n        from: 'John Doe',\n        subject: 'Incredible',\n        text: 'This is an incredible test message',\n      })\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n### Note about production use\n\nWhen 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](https://axios.nuxtjs.org/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`:\n\n```js\n// nuxt.config.js\nexport default {\n  axios: {\n    baseURL: process.env.BASE_URL,\n  },\n}\n```\n\n## Multiple message configs\n\nIt is also possible to provide multiple message configurations by changing the `message` config into an array.\n\n```js\n// nuxt.config.js\nexport default {\n  modules: [\n    ['nuxt-mail', {\n      message: [\n        { name: 'contact', to: 'contact@foo.de' },\n        { name: 'support', to: 'support@foo.de' },\n      ],\n      ...\n    }],\n  ],\n}\n```\n\nThen you can reference the config like this:\n\n```js\nmail.send({\n  config: 'support',\n  from: 'John Doe',\n  subject: 'Incredible',\n  text: 'This is an incredible test message',\n})\n```\n\nOr via index (in which case you do not need the `name` property):\n\n```js\nmail.send({\n  config: 1, // Resolves to 'support'\n  from: 'John Doe',\n  subject: 'Incredible',\n  text: 'This is an incredible test message',\n})\n```\n\nAlso, the module does not work for static sites (via `nuxt generate`) because the module creates a server route.\n\n## Setting up popular email services\n\n### Gmail\n\nYou have to setup an [app-specific password](https://myaccount.google.com/apppasswords) to log into the SMTP server. Then, add the following config to your `nuxt-mail` config. Looks like there are multiple ways to configure Gmail, so it's best to try out the options:\n\n```js\n// nuxt.config.js\nexport default {\n  modules: [\n    ['nuxt-mail', {\n      smtp: {\n        service: 'gmail',\n        auth: {\n          user: 'foo@gmail.com',\n          pass: '\u003capp-specific password\u003e',\n        },\n      },\n    }],\n  ],\n}\n```\n\n```js\n// nuxt.config.js\nexport default {\n  modules: [\n    ['nuxt-mail', {\n      smtp: {\n        host: \"smtp.gmail.com\",\n        port: 587,\n        auth: {\n          user: 'foo@gmail.com',\n          pass: '\u003capp-specific password\u003e',\n        },\n      },\n    }],\n  ],\n}\n```\n\nMissing something? Add your service here via a [pull request](https://github.com/dword-design/nuxt-mail/pulls).\n\n## Debugging mail errors\n\nIf the mail doesn't get sent, you can debug the error using the browser developer tools. If a `500` error is thrown (check out the console output), you can find the error message in the Network tab. For Chrome users, open the Network tab, then find the \"send\" request. Open it and select the \"Response\" tab. There it should show the error message. In most cases, it is related to authentication with the SMTP server.\n\n## Open questions\n\n### \"Self signed certificate in certificate chain\" error\n\nThere is [an issue](https://github.com/dword-design/nuxt-mail/issues/62) where the above error is thrown. If someone knows a solution for this, it is warmly welcome 😍.\n\n\u003c!-- LICENSE/ --\u003e\n## Contribute\n\nAre you missing something or want to contribute? Feel free to file an [issue](https://github.com/dword-design/nuxt-mail/issues) or a [pull request](https://github.com/dword-design/nuxt-mail/pulls)! ⚙️\n\n## Support\n\nHey, 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:\n\n\u003cp\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/dword\"\u003e\n    \u003cimg\n      src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\"\n      alt=\"Buy Me a Coffee\"\n      width=\"114\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;If you want to send me a one time donation. The coffee is pretty good 😊.\u003cbr/\u003e\n  \u003ca href=\"https://paypal.me/SebastianLandwehr\"\u003e\n    \u003cimg\n      src=\"https://sebastianlandwehr.com/images/paypal.svg\"\n      alt=\"PayPal\"\n      width=\"163\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;Also for one time donations if you like PayPal.\u003cbr/\u003e\n  \u003ca href=\"https://www.patreon.com/dworddesign\"\u003e\n    \u003cimg\n      src=\"https://sebastianlandwehr.com/images/patreon.svg\"\n      alt=\"Patreon\"\n      width=\"163\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;Here you can support me regularly, which is great so I can steadily work on projects.\n\u003c/p\u003e\n\nThanks a lot for your support! ❤️\n\n## See also\n\n* [nuxt-route-meta](https://github.com/dword-design/nuxt-route-meta): Adds Nuxt page data to route meta at build time.\n* [nuxt-modernizr](https://github.com/dword-design/nuxt-modernizr): Adds a Modernizr build to your Nuxt.js app.\n* [nuxt-mermaid-string](https://github.com/dword-design/nuxt-mermaid-string): Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.\n* [nuxt-content-git](https://github.com/dword-design/nuxt-content-git): Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.\n* [nuxt-babel-runtime](https://github.com/dword-design/nuxt-babel-runtime): Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.\n\n## License\n\n[MIT License](https://opensource.org/license/mit/) © [Sebastian Landwehr](https://sebastianlandwehr.com)\n\u003c!-- /LICENSE --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdword-design%2Fnuxt-mail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdword-design%2Fnuxt-mail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdword-design%2Fnuxt-mail/lists"}