nuxt-x-app
Rich email composer with grouped recipient autocomplete, CC support, rich-text body, and file attachments.
The Email category provides a self-contained email compose interface. It handles recipient search with grouped autocomplete (supporting custom email entry), CC, subject, rich-text body editing, and file attachments — all without any external email SDK dependency.
Components
<XAEmailComposer />
A vertically-oriented compose panel with To and CC fields backed by a grouped recipient popover. Recipients are selected from availableRecipients (keyed by group) or typed in freeform. Emits a structured payload on send.
<XAEmailComposer
:available-recipients="{
homeowner: { id: '1', name: 'Jane Smith', email: 'jane@example.com' },
contractors: [
{ id: '2', name: 'Bob Plumbing', email: 'bob@plumbing.com', type: 'contractor' },
],
contacts: [],
}"
:recipient-groups="[
{ key: 'homeowner', label: 'Homeowner', icon: 'i-lucide-home' },
{ key: 'contractors', label: 'Contractors', icon: 'i-lucide-hard-hat' },
{ key: 'contacts', label: 'Contacts', icon: 'i-lucide-users' },
]"
:default-to="['jane@example.com']"
default-subject="Project Update"
project-name="123 Main St Renovation"
:sending="isSending"
@send="handleSend"
@cancel="closeComposer"
@save-draft="saveDraft"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
availableRecipients | Record<string, Recipient | Recipient[]> | {} | Keyed recipient data by group — each value is a single recipient or an array |
recipientGroups | RecipientGroup[] | [homeowner, contractors, contacts] | Ordered group definitions displayed in the recipient popover |
defaultTo | string[] | [] | Pre-populated To email addresses |
defaultCc | string[] | [] | Pre-populated CC email addresses |
defaultSubject | String | '' | Pre-populated subject line |
defaultBody | String | '' | Pre-populated email body |
projectName | String | '' | Context label shown in the composer header |
sending | Boolean | false | Show loading state on the Send button |
Recipient shape:
| Field | Type | Description |
|---|---|---|
id | string? | Optional ID |
email | string | Email address (required) |
name | string | Display name (required) |
avatar | string? | Avatar URL |
type | string? | Recipient type label (displayed as a badge) |
RecipientGroup shape:
| Field | Type | Description |
|---|---|---|
key | string | Matches key in availableRecipients |
label | string | Group heading in the popover |
icon | string? | Lucide icon name for the group |
Emits
| Event | Payload | Description |
|---|---|---|
send | { to: string[], cc: string[], subject: string, body: string, attachments: File[] } | User clicked Send — all selected recipient emails |
cancel | — | User clicked Cancel |
save-draft | — | User clicked Save Draft |
AI Context
category: Email
package: "@xenterprises/nuxt-x-app"
components:
- XAEmailComposer
use-when: >
Building email send functionality within an app — project communication,
client outreach, notifications. Does not send email itself; emits a
structured payload that the parent handles (e.g., passes to an API route).
key-patterns:
- availableRecipients keys must match recipientGroups keys
- Each group value can be a single Recipient or Recipient[] array
- Custom freeform email addresses can be typed and added with Enter
- The send event payload includes resolved email strings, not Recipient objects
- Set sending: true while awaiting the API response to disable the Send button