BÀI 29: GỬI EMAIL TRONG NUXT BẰNG RESEND HOẶC EMAILJS

Cùng tiếp tục với Bài 29 – Tích hợp gửi email với Resend hoặc EmailJS trong Nuxt 3. Việc gửi email rất quan trọng cho các tính năng như form liên hệ, xác nhận đăng ký, gửi thông báo, hay khôi phục mật khẩu.

---

1. Các cách gửi email phổ biến

Phương pháp	Ưu điểm
Resend API	Dễ dùng, miễn phí, không cần SMTP
EmailJS client	Gửi trực tiếp từ trình duyệt
SMTP truyền thống	Toàn quyền kiểm soát
SendGrid, Mailgun	Tương tự Resend, API mạnh mẽ

---

2. Dùng Resend – đơn giản nhất

a) Đăng ký tài khoản

• Truy cập https://resend.com
• Tạo API Key
• Xác thực domain (nếu dùng email custom), hoặc dùng sandbox email

---

b) Cài thư viện

📋 Copynpm install resend

---

c) Tạo API gửi email

File: server/api/send-email.post.ts

📋 Copyimport { Resend } from 'resend'

const resend = new Resend(process.env.RESEND_API_KEY)

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const { name, email, message } = body

  const data = await resend.emails.send({
    from: 'Your Site <onboarding@resend.dev>',
    to: 'you@example.com',
    subject: `Liên hệ mới từ ${name}`,
    text: `Email: ${email}\n\n${message}`
  })

  return { success: true, id: data.id }
})

---

d) Gửi form từ frontend

📋 Copy<template>
  <form @submit.prevent="sendEmail">
    <input v-model="name" placeholder="Tên" />
    <input v-model="email" placeholder="Email" />
    <textarea v-model="message" placeholder="Tin nhắn"></textarea>
    <button>Gửi</button>
    <p v-if="done">Đã gửi thành công</p>
  </form>
</template>

<script setup>
const name = ref('')
const email = ref('')
const message = ref('')
const done = ref(false)

async function sendEmail() {
  await $fetch('/api/send-email', {
    method: 'POST',
    body: { name: name.value, email: email.value, message: message.value }
  })
  done.value = true
}
</script>

---

3. Dùng EmailJS – không cần server

EmailJS là dịch vụ gửi email từ trình duyệt, không cần server/API.

a) Đăng ký tại https://www.emailjs.com

• Tạo service, template, và lấy user_id, template_id

b) Cài đặt thư viện

📋 Copynpm install emailjs-com

c) Sử dụng trong Nuxt component

📋 Copyimport emailjs from 'emailjs-com'

async function sendEmail() {
  await emailjs.send(
    'YOUR_SERVICE_ID',
    'YOUR_TEMPLATE_ID',
    {
      name: name.value,
      email: email.value,
      message: message.value
    },
    'YOUR_USER_ID'
  )
  done.value = true
}

Không cần viết API nếu bạn muốn gửi từ frontend.

---

4. Bảo mật & lưu form

• Không nên lộ API key lên client (trừ EmailJS, có bảo mật riêng)
• Nếu dùng Resend: chỉ xử lý từ server-side API
• Có thể lưu form vào database song song với gửi email

---

5. Tuỳ chọn nâng cao

• Gửi xác nhận lại cho người gửi
• Gửi đến nhiều email
• Đính kèm file (nếu backend hỗ trợ)
• Tạo HTML email template đẹp hơn

---

Bạn đã học được

• Sử dụng Resend để gửi email qua API riêng
• Gửi từ frontend bằng EmailJS nếu không có backend
• Tạo form liên hệ gửi email tự động
• Bảo mật API key và xử lý an toàn
• Mở rộng xác nhận, đính kèm, HTML email

---

Bài tập mở rộng

1. Viết form liên hệ gửi email + lưu vào DB
2. Gửi email xác nhận cho người gửi (cc)
3. Tạo HTML template chuyên nghiệp
4. Kết hợp upload ảnh + gửi đính kèm qua email