@flora-labs/mailman

Nuxt-based email template designer, using Vue Email for compilation.

Installation

npm install @flora-labs/mailman

Usage

This package exports standard Vue components using Vite. No build configuration is required in your consuming project - just import and use.

import sendgridMail from '@sendgrid/mail'
import { render } from '@vue-email/render'

import { AccountCreated, replacePlaceholders } from '@flora-labs/mailman'

import type { AccountCreatedProps } from '@flora-labs/mailman'

sendgridMail.setApiKey('SG.XXXX')

const templateData: AccountCreatedProps = {
  name: 'Chloe',
  appUrl: 'https://flora.build',
}

const html = await render(AccountCreated, templateData)

const emailData: {
  to: string
  from: string
  html: string
  subject: string
  replyTo: string
  asm?: {
    groupId: number
  }
} = {
  html,
  to: '[email protected]',
  from: AccountCreated.props.from?.default || 'Flora <[email protected]>',
  subject: replacePlaceholders(AccountCreated.props.subject.default, templateData),
  replyTo: AccountCreated.props.replyTo?.default || 'Flora Support <[email protected]>',
}

if (typeof AccountCreated.props.unsubscribeGroupId?.default === 'number') {
  emailData.asm = { groupId: AccountCreated.props.unsubscribeGroupId.default }
}

const [response] = await sendgridMail.send(emailData)

console.log(response)

process.exit()

Local development

You can develop emails in locally using the Nuxt app portion of the project:

npm run dev

This will spin up a nuxt server and let you edit emails under app/components/email. It also provides a way to send test emails as you develop.

Consuming / sending emails locally

You can use locally-edited files in your project using npm link

In the Mailman repo:

npm run build:emails
npm link

In your consuming repo:

npm link @flora-labs/mailman

Then you should be able to import from @flora-labs/mailman just as if you had published your changes to NPM.