Cómo enviar correos electrónicos desde su aplicación Vue.js con EmailJS

Hace unos días decidí trabajar en un proyecto simple de Vue y necesitaba enviar correos electrónicos a través de un contacto que acababa de crear. Quería recibir un correo electrónico automático cada vez que alguien llenara mi formulario de contacto.

Así que me puse a buscar y encontré EmailJs. Decidí escribir este artículo porque sentí que su documentación era excelente y era realmente fácil de usar. También espero que ayude a alguien :)

¡Empecemos!

En este artículo, le mostraré cómo usar EmailJS para enviar correos electrónicos desde su aplicación Vuejs.

Antes de continuar, supongo que tiene Vue CLI instalado en su computadora, ya que crearé un mini proyecto de demostración con él. Si no es así, es posible que desee comprobar cómo instalarlo aquí.

Crearemos el proyecto usando este comando:

vue create vue-emailjs-demo

Luego, se nos pedirá la opción de elegir un ajuste predeterminado predeterminado o seleccionar funciones manualmente. Seleccione default.

Se creará un nuevo directorio de proyecto y puede navegar en él usando este comando:

cd vue-emailjs-demo

Cómo instalar EmailJS

EmailJS le ayuda a enviar correos electrónicos utilizando únicamente tecnologías del lado del cliente. No se requiere servidor, simplemente conecte EmailJS a uno de los servicios de correo electrónico compatibles, cree una plantilla de correo electrónico y use su biblioteca JavaScript para activar un correo electrónico.

Antes de comenzar a escribir nuestro código, querrá crear una cuenta EmailJS. Con su cuenta, podrá crear plantillas de correo electrónico y elegir el correo electrónico al que desea que vayan sus correos electrónicos automáticos.

Una vez que inicie sesión en su nueva cuenta, será dirigido al panel de control.

Cómo crear la plantilla de correo electrónico

Las plantillas de correo electrónico pueden contener opcionalmente variables dinámicas en casi cualquier campo (por ejemplo, asunto, contenido, correo electrónico PARA, nombre DE, etc.). Se completan a partir de la llamada de JavaScript. Entraremos en esto en breve.

Primero agreguemos un servicio de correo electrónico. Seleccioné Gmail, pero puede elegir el servicio que mejor se adapte a sus necesidades.

Además, si no desea comenzar a pensar en un nombre para usted Service ID, toque el ícono de búsqueda y se generará automáticamente para usted.

A continuación, crearemos nuestra plantilla de correo electrónico. Navega a la página de plantillas. Crea una nueva plantilla. Nuestra plantilla de correo electrónico definirá el asunto de nuestro correo electrónico, qué contenido contendrá, a dónde debe enviarse, etc.

Los conjuntos de llaves dobles que se muestran arriba {{from_name}}son variables. Cuando un usuario completa nuestro formulario, pasaremos esa información a EmailJS usando estas variables.

A continuación se muestra una pequeña explicación de los campos disponibles en nuestra plantilla:

  • Asunto: el asunto del correo electrónico.
  • Contenido: Elcuerpo del correo electrónico. Vamos a pasar el mensaje del usuario, su nombre y su dirección de retorno aquí.
  • Para correo electrónico: contiene el destino de este correo electrónico.
  • From Name : Esto es opcional. Pero puedes escribir tu nombre allí.
  • De correo electrónico: la dirección de correo electrónico del remitente tal como aparecerá para el destinatario. Si la casilla de verificación de la dirección de correo electrónico predeterminada está habilitada, EmailJS utilizará la dirección de correo electrónico asociada con el servicio de correo electrónico en uso.
  • Responder a: establece la dirección de correo electrónico a la que se deben enviar las respuestas.
  • BCC y CC: estos dos campos se utilizan normalmente para enviar una copia del mensaje a todas las personas que ha enumerado. Reply To,BCC and CCno se utilizará en esta guía, ya que queremos que sea lo más simple posible. Si necesita más información, puede consultar los documentos de EmailJS aquí.

Nota: En un momento de este artículo, utilizaremos Service IDy Template ID. También necesitaremos un User ID. Puede encontrar su User IDen la parte de integración del tablero. Puede copiar los detalles en su portapapeles y pegarlos cuando sea necesario.

Cómo instalar EmailJS en su aplicación

Ahora pasando al código :) Para instalar EmailJS en su aplicación, use este comando:

npm install emailjs-com --save

Enviaremos un correo electrónico desde un formulario de contacto muy simple. Recopilará datos que incluyen: nombre (del remitente), correo electrónico (del remitente) y el contenido del mensaje. ¡Cosas simples!

Puede editar el HelloWorld.Vuecomponente que se creó automáticamente para nosotros cuando usamos la CLI de Vue o puede crear un componente nuevo llamado ContactForm.vue. Estaré haciendo lo último.

A continuación, crearemos el componente de formulario de contacto ContactForm.vue.

Comencemos con template:

 Name  Email  Message 

Explicando nuestro marcado

Como mencioné anteriormente, enviaremos un correo electrónico desde un formulario de contacto muy simple. Así que crea un divelemento que contendrá el contenido de nuestro formulario. Agregaremos estilo a nuestro formulario, así que agregue una clase containeral div elemento.

 * {box-sizing: border-box;} .container { display: block; margin:auto; text-align: center; border-radius: 5px; background-color: #f2f2f2; padding: 20px; width: 50%; } label { float: left; } input[type=text], [type=email], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } 

Puede iniciar su servidor con el comando:

npm run serve

Ahora, abra su navegador en localhost: 8080 y debería ver su formulario:

También crearemos un método llamado sendEmailque maneja el envío de nuestros datos. Pero antes de hacer eso, necesitamos importar emailjsen nuestro archivo.

Agregue la siguiente línea justo debajo script:

import emailjs from 'emailjs-com';

A continuación se muestra el resto del código necesario en nuestro script:

 export default { name: 'ContactUs', data() { return { name: '', email: '', message: '' } }, methods: { sendEmail(e) { try { emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID', { name: this.name, email: this.email, message: this.message }) } catch(error) { console.log({error}) } // Reset form field this.name = '' this.email = '' this.message = '' }, } } 

Que esta haciendo este codigo

Usé uno de los try...catchanteriores, pero no es necesario que lo uses. Recuerda cuando te pedícopiar su ID de servicio, ID de plantilla e ID de usuario en su portapapeles y pegarlos para cuando sean necesarios? ¡Pues los necesitas absolutamente ahora! Por lo tanto, reemplace esa parte del fragmento con sus detalles reales.

emailjs.sendForm() is how we send data to EmailJS after passing the Service ID, Template ID, User ID and form data that were passed into sendEmail(). We console.log() any error encountered with the catch() block.

It is important to note that sendForm() sends an email based on the specified email template and the passed form data. So make sure that your form input name is the same as the variable in your EmailJS template.

Below is my modified EmailJS template with the name (of the sender), email (of the sender), and the message content.

That's it!

Check the To Email address included in your template and you should have your email sent there already. You could also play around with the Test it or playground feature on the top-right corner of the template if you want.

GitHub Repo

You can find the code for this article in my GitHub account.

Feel free to share this article if you found it helpful. Thanks for reading!