CODEWITHSUNDEEP
javascriptvue.jsemailaxiosnuxt.js
kuro
kuro

Reputation: 23

Sending mail in Nuxt.js with nuxt-mail

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 component 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 :)

Upvotes: 1

Views: 11312

Answers (2)

Sebastian Landwehr
Sebastian Landwehr

Reputation: 399

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.

Upvotes: 6

kissu
kissu

Reputation: 46761

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.com/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 comes down of using an exernal service, especially if you plan on going full-static only.

Upvotes: 1

Related Questions