Skip to main content

​
Prerequisites

Before you begin, make sure you have:
  • Completed the installation steps
  • Configured your Lettermint API key
  • A running Nuxt 3 or Nuxt 4 project

​
Send Your First Email

1

Choose your approach

Nuxt Lettermint supports both client-side and server-side email sending. Choose the approach that best fits your use case:
  • Client-side: Use the useLettermint() composable in your Vue components
  • Server-side: Use the sendEmail() function in your API routes
2

Client-side example

Use the useLettermint() composable in your Vue components or pages:
app.vue
<script setup>
const { send, sending, error, lastMessageId } = useLettermint()

const sendTestEmail = async () => {
  const result = await send({
    from: '[email protected]',
    to: '[email protected]',
    subject: 'Test Email from Nuxt Lettermint Module',
    text: 'This is a test email sent from the Nuxt Lettermint module.',
    html: '<h1>Test Email</h1><p>This is a <strong>test email</strong> sent from the Nuxt Lettermint module.</p>',
    tags: ['nuxt']
  })

  if (result.success) {
    console.log('Email sent successfully!', result.messageId)
  }
}
</script>

<template>
  <div>
    <button @click="sendTestEmail" :disabled="sending">
      {{ sending ? 'Sending...' : 'Send Email' }}
    </button>
    <p v-if="error" class="error">Error: {{ error }}</p>
    <p v-if="lastMessageId" class="success">Message ID: {{ lastMessageId }}</p>
  </div>
</template>
The useLettermint() composable provides reactive state for sending, error, and lastMessageId to easily track the email sending status.
3

Server-side example

Use the sendEmail() function in your server API routes:
server/api/send-welcome.post.ts
import { sendEmail } from '#imports'

export default defineEventHandler(async () => {
  try {
    const result = await sendEmail({
      from: '[email protected]',
      to: '[email protected]',
      subject: 'Welcome',
      html: '<h1>Welcome!</h1>',
      tags: ['welcome']
    })

    return {
      success: true,
      messageId: result.message_id,
      status: result.status
    }
  }
  catch (error) {
    return {
      success: false,
      error: (error as Error).message
    }
  }
})
Server-side email sending is more secure as it keeps your API key hidden from the client.

​
Complete Working Example

Here’s a full example from the playground demonstrating both client-side and server-side email sending:
playground/app.vue
<script setup>
import { ref } from 'vue'

const { send, sending, error, lastMessageId } = useLettermint()

const emailForm = ref({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Test Email from Nuxt Lettermint Module',
  text: 'This is a test email sent from the Nuxt Lettermint module playground.',
  html: '<h1>Test Email</h1><p>This is a <strong>test email</strong> sent from the Nuxt Lettermint module.</p>',
  tag: 'nuxt'
})

const successMessage = ref('')

const sendTestEmail = async () => {
  successMessage.value = ''

  const emailData = {
    from: emailForm.value.from,
    to: emailForm.value.to,
    subject: emailForm.value.subject,
    text: emailForm.value.text,
    html: emailForm.value.html
  }

  if (emailForm.value.tag && emailForm.value.tag.trim()) {
    emailData.tags = [emailForm.value.tag.trim()]
  }

  const result = await send(emailData)

  if (result.success) {
    successMessage.value = `Email sent successfully! Message ID: ${result.messageId}`
  }
}
</script>

<template>
  <div>
    <h1>Send Email Demo</h1>
    <button @click="sendTestEmail" :disabled="sending">
      {{ sending ? 'Sending...' : 'Send Email' }}
    </button>
    <p v-if="error" class="error">Error: {{ error }}</p>
    <p v-if="successMessage" class="success">{{ successMessage }}</p>
  </div>
</template>

​
Email Options

Both send() and sendEmail() accept the following options:
​
from
string
required
The sender’s email address
​
to
string | string[]
required
The recipient’s email address(es)
​
subject
string
required
The email subject line
​
text
string
Plain text version of the email
​
html
string
HTML version of the email
​
cc
string | string[]
CC recipients
​
bcc
string | string[]
BCC recipients
​
replyTo
string | string[]
Reply-to email address(es)
​
headers
Record<string, string>
Custom email headers
​
metadata
Record<string, unknown>
Custom metadata to attach to the email
​
tags
string[]
Tags for categorizing and tracking emails
​
attachments
Array<{filename: string, content: string | Buffer, contentType?: string}>
Email attachments

​
Advanced Example

Send an email with all available options:
server/api/advanced-email.post.ts
import { sendEmail } from '#imports'

export default defineEventHandler(async () => {
  try {
    const result = await sendEmail({
      from: '[email protected]',
      to: '[email protected]',
      cc: '[email protected]',
      bcc: '[email protected]',
      replyTo: '[email protected]',
      subject: 'Test Full Options',
      text: 'Plain text version',
      html: '<h1>HTML version</h1>',
      headers: {
        'X-Custom-Header': 'custom-value'
      },
      metadata: {
        userId: '12345',
        campaign: 'test-campaign'
      },
      tags: ['test', 'full-options'],
      attachments: [
        {
          filename: 'test.txt',
          content: 'Test attachment content'
        }
      ]
    })

    return {
      success: true,
      result
    }
  }
  catch (error) {
    return {
      success: false,
      error: (error as Error).message
    }
  }
})

​
Testing Your Integration

Use [email protected] as the recipient for testing. This is a special testing address provided by Lettermint that accepts all emails without actually sending them.

​
Next Steps

API Reference

Explore the complete API documentation

Advanced Usage

Learn advanced patterns and best practices

Lettermint Docs

Read the Lettermint platform documentation

Examples

View more examples on GitHub

Build docs developers (and LLMs) love

Get started for freeTalk to us