> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wazobiamail.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue 3 SDK

> Use wazobiamail-vue for reactive sending, mailbox, domain and deliverability composables in Vue 3.

`wazobiamail-vue` wraps the core `wazobiamail` SDK in Vue 3 composables and an application plugin. Use it when you want reactive state for sending, inboxes, domains or spam checks without writing loading/error plumbing.

> [card] [npm package](https://www.npmjs.com/package/wazobiamail-vue)
>
> `wazobiamail-vue` — version 0.1.0

> [card] [Source](https://github.com/WazobiaMail/wazobiamail-vue)
>
> WazobiaMail/wazobiamail-vue

## At a glance

| | |
| - | - |
| Runtime | Vue 3.3+ |
| Package | `wazobiamail-vue` + peer `wazobiamail` |
| Install | `npm install wazobiamail-vue wazobiamail` |
| Auth | API key supplied to the plugin or `useWazobiaMail` |
| Source | [github.com/WazobiaMail/wazobiamail-vue](https://github.com/WazobiaMail/wazobiamail-vue) |

## Install

```bash theme={null}
npm install wazobiamail-vue wazobiamail
```

## Register the plugin

```ts theme={null}
// main.ts
import { createApp } from 'vue';
import { createWazobiaMail } from 'wazobiamail-vue';
import App from './App.vue';

createApp(App)
  .use(createWazobiaMail({ apiKey: import.meta.env.VITE_WAZOBIA_API_KEY }))
  .mount('#app');
```

The plugin provides the client through `useWazobiaMail()` and `$wazobiamail` on component instances. Keep `VITE_WAZOBIA_API_KEY` server-only in production; for browser apps, proxy sends through your own backend.

## Send email with `useSendMail`

```vue theme={null}
<script setup lang="ts">
import { useSendMail } from 'wazobiamail-vue';

const { send, isLoading, isSuccess, error } = useSendMail();

async function submit() {
  await send({
    from: 'Acme <hello@mail.example.com>',
    to: 'customer@example.com',
    subject: 'Your order shipped',
    html: '<p>Your order is on its way.</p>',
  }, { idempotencyKey: 'order-1042-shipped' });
}
</script>

<template>
  <button :disabled="isLoading" @click="submit">
    {{ isLoading ? 'Sending…' : 'Send' }}
  </button>
  <p v-if="isSuccess">Queued.</p>
  <p v-else-if="error">{{ error.message }}</p>
</template>
```

## Other composables

* `useMailbox(mailboxId)` — reactive headless inbox with pagination, unread filter, polling and optimistic delete.
* `useDomains()` — list/create domains, read DNS records and verify.
* `useSpamCheck()` — run a pre-flight deliverability/spam check.
* `useWazobiaMail()` — access the underlying client for anything not wrapped by a composable.

```ts theme={null}
const { messages, refresh, nextPage, prevPage, startPolling } = useMailbox('mbx_123', {
  unreadOnly: true,
  pollInterval: 15_000,
});

const { domains, list, create, verify, getDnsRecords } = useDomains();
```

## Error handling

Composables expose `error` refs and re-throw from async actions. Catch the core typed errors when you need status codes or retry behavior:

```ts theme={null}
import { WazobiaError } from 'wazobiamail';

try {
  await send(payload);
} catch (error) {
  if (error instanceof WazobiaError) console.error(error.message);
}
```

## Framework notes

Vue's reactivity is handled with `ref` and `computed`; polling timers are cleaned up on unmount when the composable is used inside a component. For SSR/Nuxt, prefer the dedicated `wazobiamail-nuxt` module so API keys stay on the Nitro server.

## Links

* [npm](https://www.npmjs.com/package/wazobiamail-vue)
* [GitHub](https://github.com/WazobiaMail/wazobiamail-vue)
* [Full README](https://github.com/WazobiaMail/wazobiamail-vue#readme)
* [All official SDKs](https://docs.wazobiamail.com/docs/guides/sdks.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.