Nuxt Email Layer

pnpm add @jagu.cz/email-layer

Usage

Config

To use this layer add extends: ['@jagu.cz/email-layer'] to nuxt.config.ts.

The layer supports two email providers: Zimbra and SMTP.

Zimbra

Add Zimbra credentials to your environment variables:

[email protected]
NUXT_ZIMBRA_PASSWORD=your-password

SMTP

Add SMTP credentials to your environment variables:

NUXT_SMTP_HOST=smtp.example.com
NUXT_SMTP_PORT=587
NUXT_SMTP_USERNAME=your-username
NUXT_SMTP_PASSWORD=your-password
[email protected]

Functions

sendZimbraEmail(name, to, subject, template, attachments)

Sends email via Zimbra.

| Parameter | Type | Description | |-----------|------|-------------| | name | string | Sender display name | | to | string | Recipient email address | | subject | string | Email subject | | template | string | HTML content of the email | | attachments | MailAttachment[] | Array of attachments |

sendSmtpEmail(name, to, subject, template, attachments)

Sends email via SMTP.

| Parameter | Type | Description | |-----------|------|-------------| | name | string | Sender display name | | to | string | Recipient email address | | subject | string | Email subject | | template | string | HTML content of the email | | attachments | Attachment[] | Array of attachments (nodemailer format) |

Example

export default defineEventHandler(async (event) => {
  const { firstName, lastName, firmName, email, phone, message } = await readBody<Form>(event)

  const template = await render(EmailTemplate, {
    firstName,
    lastName,
    firmName,
    email,
    phone,
    message,
  })

  if (process.env.NODE_ENV === 'development') return { ok: true }

  // Using Zimbra
  return await sendZimbraEmail('Jagu', '[email protected]', 'Nový zájemce o služby', template, [])

  // Or using SMTP
  // return await sendSmtpEmail('Jagu', '[email protected]', 'Nový zájemce o služby', template, [])
})

Setup

Make sure to install the dependencies:

pnpm install

Working on your layer

Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.

The .playground directory should help you on trying your layer during development.

Running pnpm dev will prepare and boot .playground directory, which imports your layer itself.

Distributing your layer

Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.

To do so, you only have to check if files in package.json are valid, then run:

npm publish --access public

Once done, your users will only have to run:

npm install --save your-layer

Then add the dependency to their extends in nuxt.config:

defineNuxtConfig({
  extends: 'your-layer',
})

Development Server

Start the development server on http://localhost:3000

pnpm dev

Production

Build the application for production:

pnpm build

Or statically generate it with:

pnpm generate

Locally preview production build:

pnpm preview

Checkout the deployment documentation for more information.