I am a total newbie at Nuxt.js/Vue.js so here are some newbie questions :D

I am having problems with sending mail from a contact from in my Nuxt.js application. I am trying to use nuxt-mailer but I can't make it work. I have installed axios and nuxt-mail.

I get 500 (Internal Server Error).

So I am adding this in nuxt.config.js:

'@nuxtjs/axios',
['nuxt-mail', {
  message: {
    to: 'my-email',
  },
  smtp: {
    host: "localhost",
    port: 587,
  },
}],

Am I supposed to put the mail where I want to receive the mail in the 'to'? And am should I pit just localhost in host or http://localhost? And lastly what should I pun for 'port'? Is that 3000 as the post on my localhost?

Okay next, my form in the ponent likes like this:

<template>
  <div class="container">
    <form>    
      <label for="name">Ditt namn</label>            
      <input id="name" type="text" v-model="name"/>

      <label for="email">Din epostadress</label>            
      <input id="email" type="email" v-model="email"/>

      <label for="phone">Telefon</label>            
      <input id="phone" type="phone" v-model="phone"/>

      <label for="message"> Meddelande: </label>
      <textarea id="message" v-model="message"/>
      
      <button type="submit" @click.prevent="send">Send email </button>
    </form>
   </div>
</template>

and the script lokes like this:

<script>
export default {
    data: () => ({
    name: '',
    email: '',
    phone: '',
    message: '',
  }),
  methods: {
    send() {
        this.$mail.send({
        name: this.name,
        from: this.email,
        phone: this.phone,
        subject: 'Message from contact-form',
        text: this.message,
      })
    }
  }
}
</script>

So what can be the problem? A wonder if I am doing something wrong in the nuxt.config.js file? But i don't know at all.

Hope someone can help :)

I am a total newbie at Nuxt.js/Vue.js so here are some newbie questions :D

I am having problems with sending mail from a contact from in my Nuxt.js application. I am trying to use nuxt-mailer but I can't make it work. I have installed axios and nuxt-mail.

I get 500 (Internal Server Error).

So I am adding this in nuxt.config.js:

'@nuxtjs/axios',
['nuxt-mail', {
  message: {
    to: 'my-email',
  },
  smtp: {
    host: "localhost",
    port: 587,
  },
}],

Am I supposed to put the mail where I want to receive the mail in the 'to'? And am should I pit just localhost in host or http://localhost? And lastly what should I pun for 'port'? Is that 3000 as the post on my localhost?

Okay next, my form in the ponent likes like this:

<template>
  <div class="container">
    <form>    
      <label for="name">Ditt namn</label>            
      <input id="name" type="text" v-model="name"/>

      <label for="email">Din epostadress</label>            
      <input id="email" type="email" v-model="email"/>

      <label for="phone">Telefon</label>            
      <input id="phone" type="phone" v-model="phone"/>

      <label for="message"> Meddelande: </label>
      <textarea id="message" v-model="message"/>
      
      <button type="submit" @click.prevent="send">Send email </button>
    </form>
   </div>
</template>

and the script lokes like this:

<script>
export default {
    data: () => ({
    name: '',
    email: '',
    phone: '',
    message: '',
  }),
  methods: {
    send() {
        this.$mail.send({
        name: this.name,
        from: this.email,
        phone: this.phone,
        subject: 'Message from contact-form',
        text: this.message,
      })
    }
  }
}
</script>

So what can be the problem? A wonder if I am doing something wrong in the nuxt.config.js file? But i don't know at all.

Hope someone can help :)

• javascript
• vue.js
• email
• axios
• nuxt.js

• Are you planning to use this in a static site or a node-hosted one ? I'm asking because it will not work on a full static one and because in that case, you may look for a totally different service IMO. – kissu Commented Apr 15, 2021 at 13:21
• No, not on a static site. It will be on a node-hostet one. – kuro Commented Apr 16, 2021 at 11:02
• Alright, so my answer is still valid. – kissu Commented Apr 16, 2021 at 14:22
• Yes thank you for helping! I think it is the problem you described with that it will not work on localhost. i am all new to this so that dit not even cross my mind, so thanks for pointing that out to me! i will look in ti the mail sending services you mentioned. – kuro Commented Apr 19, 2021 at 6:06

2 Answers 2

I accidentally happen to be the developer of nuxt-mail :). Just found this post while working on the module.

So, kissu already mentioned most relevant things. You need a running mail server, localhost won't work here (and will likely be the source issue). What you can do is have a look at Mailtrap. It basically does what you are looking for, meaning it provides a mail server for testing and local development. Emails will land in a special inbox that you can inspect and empty at your behalf. You can even use an API to check the inbox.

Hope this helps, if you happen to be using nuxt-mail, feel free to file an issue if there's anything, or write me on Twitter.

Looking at the readme and the related page of nodemailer, it looks like that:

• to refers to the actual email address of the receiver, something like [email protected]
• host needs to be a valid hosted SMTP server, so localhost is probably no the good one here, since it will 100% not work once pushed to production
• the port depends of the SMTP configuration essentially: defaults to 587 if is secure is false or 465 if true (from nodemailer documentation)

Here is a blog article to setup some emails IF you will be using the node part of your Nuxt app: https://blog.lichter.io/posts/emails-through-nuxtjs/

Here is a blogpost on how to especially use nuxt-mail: https://dword-design.de/blog/sending-emails-with-nuxt-js-the-easy-way/

You will still need a mail sending service to have this work, on Mailtrap thanks to Mailgun, Sendgrid, Mailchimp or alike.

You can also use Netlify functions for that: https://css-tricks./netlify-functions-for-sending-emails/ or any other serverless functions

As you can see, the configuration is not trivial and there are several ways to achieve this but it essentially es down of using an exernal service, especially if you plan on going full-static only.