This a full rewrite of
nuxt-mailusing typescript,@nuxt/module-builderand supports Nuxt>=3.0.0only.
- 📨 Send emails using
useNuxtApp().$mailor theuseMail()composable - ⚙️ Generated types based on configuration for type inference
- 📫 Uses
nodemailerfrom within a server route
Warning
This module does not work for statically generated sites (SSG) as it relies on server routes to communicate with the SMTP server.
$ npx nuxi module add @goede/nuxt-mailAdd the module to the modules array in your nuxt.config.ts.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
[
"@goede/nuxt-mail",
{
message: {
to: "[email protected]",
},
smtp: {
host: "smtp.example.com",
port: 587,
},
},
],
],
// or use the top-level option:
mail: {
message: {
to: "[email protected]",
},
smtp: {
host: "smtp.example.com",
port: 587,
},
},
});Warning
For security reasons a message configuration is required to set a to, cc or bcc property. This prevents sending out mails to arbitrary recipients from the client-side, only to those preconfigured.
The smtp options are required and directly passed to nodemailer. Refer to their documentation for available options.
Besides setting the recipient fields, you can preconfigure other message fields in the message config to send emails with the common values (such as subject, from, etc.).
<script setup>
const mail = useMail();
mail.send({
from: "John Doe",
subject: "Incredible",
text: "This is an incredible test message",
});
</script><script setup>
const { $mail } = useNuxtApp();
$mail.send({
from: "John Doe",
subject: "Incredible",
text: "This is an incredible test message",
});
</script><script lang="ts">
export default defineNuxtcomponent({
methods: {
sendEmail() {
this.$mail.send({
from: "John Doe",
subject: "Incredible",
text: "This is an incredible test message",
});
},
},
});
</script>Multiple message configurations can be set by changing the message config into an array.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
[
"@goede/nuxt-mail",
{
message: [
{ name: "contact", to: "[email protected]" },
{ name: "support", to: "[email protected]" },
],
// ...
},
],
],
});These configurations can be used by passing config property that corresponds with the config name. These names will autocomplete using types generated on startup.
mail.send({
config: "support",
from: "John Doe",
subject: "Incredible",
text: "This is an incredible test message",
});For legacy purposes we support passing the config index instead of the config name.
Note
This will be removed in v2 as the config name is now typesafe.
mail.send({
config: 1, // Resolves to 'support'
from: "John Doe",
subject: "Incredible",
text: "This is an incredible test message",
});You have to setup an app-specific password 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:
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
[
"@goede/nuxt-mail",
{
smtp: {
service: "gmail",
auth: {
user: "[email protected]",
pass: "<app-specific password>",
},
},
},
],
],
});// nuxt.config.ts
export default defineNuxtConfig({
modules: [
[
"nuxt-mail",
{
smtp: {
host: "smtp.gmail.com",
port: 587,
auth: {
user: "[email protected]",
pass: "<app-specific password>",
},
},
},
],
],
});Missing something? Add your service here via a pull request.
You can debug errors 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 and look for the "send" request. Open it and select the "Response" tab, this should show the error message, in most cases the error is related to authentication with the SMTP server.
There is an open issue where the above error is thrown, if you know what could be causing this or have a solution for this please join the issue discussion and let us know!
Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️