# @docuseal/vue

> DocuSeal Vue components to integrate documents signing process into apps. ✍️

Latest version **1.0.55** (published 2026-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @docuseal/vue
pnpm add @docuseal/vue
yarn add @docuseal/vue
bun add @docuseal/vue
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.55 |
| Published | 2026-11-03 |
| First published | 2023-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 44.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | DocuSeal |
| Maintainers | petem, alex.turchyn |
| Keywords | vue, esignature, document signing, docuseal |

## Links

- npm: https://www.npmjs.com/package/@docuseal/vue
- Repository: https://github.com/docusealco/docuseal-vue
- Homepage: https://www.docuseal.com/docs/embedded
- Issues: https://github.com/docusealco/docuseal-vue/issues
- npm.io page: https://npm.io/package/@docuseal/vue

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.0.55 (latest) — 2026-11-03
- 1.0.54 — 2026-05-10
- 1.0.53 — 2026-04-24
- 1.0.52 — 2026-02-04
- 1.0.51 — 2025-11-08
- 1.0.50 — 2025-07-23
- 1.0.49 — 2025-06-23
- 1.0.48 — 2025-04-11
- 1.0.47 — 2025-03-24
- 1.0.46 — 2025-02-11
- 1.0.45 — 2025-01-30
- 1.0.44 — 2024-12-20
- 1.0.43 — 2024-11-02
- 1.0.42 — 2024-10-24
- 1.0.41 — 2024-10-20
- … 41 more at https://npm.io/package/@docuseal/vue/versions

## README

# DocuSeal Vue Components

[📙 Documentation](https://www.docuseal.com/docs/embedded/form#vue) | [🚀 Demo App](https://embed.docuseal.tech/)

This package provides a convenient way to embed [DocuSeal](https://www.docuseal.com) into Vue apps. Sign documents and create document forms directly in your apps.

[Embedded Signing Form](#signing-form) 

![Signing Form](https://github.com/user-attachments/assets/5c92b842-7687-4341-88a1-64ac26c1e2e0)

[Embedded Form Builder](#form-builder) 

![Form Builder](https://github.com/user-attachments/assets/7645a4fb-7399-4cce-bb90-e077a8a1ce95)

## Installation

```bash
npm install @docuseal/vue
```

## Documentation

For detailed documentation, please click [here](https://www.docuseal.com/docs/embedded).

## Usage

### Signing Form

Copy public DocuSeal form URL from [https://docuseal.com](https://docuseal.com) and use it in the `src` component prop:

```vue
<template>
// ...
  <DocusealForm
    :src="'https://docuseal.com/d/LEVGR9rhZYf86M'"
    :email="'signer@example.com'"
  />
// ...
</template>

<script>
// ...
import { DocusealForm } from '@docuseal/vue'

export default {
  name: 'App',
  components: {
    DocusealForm
  },

// ...

}
</script>
```

### Form Builder

```vue
<template>
// ...
  <DocusealBuilder
    v-if="token"
    :token="token"
  />
// ...
</template>

<script>
// ...
import { DocusealBuilder } from '@docuseal/vue'

export default {
  name: 'App',
  components: {
    DocusealBuilder
  },
  mounted () {
    this.loadToken()
  },
  methods: {
    loadToken () {
      fetch('/api/docuseal/builder_token', {
        method: 'POST'
      }).then(async (resp) => {
        const data = await resp.json()

        this.token = data.token
      })
    }
  }

// ...

}
</script>
```

To protect the template builder from unathorized access a secure token (JWT) should be generated on the back-end:

```js
const express = require('express');
const jwt = require('jsonwebtoken');

const app = express();

const secretKey = process.env.DOCUSEAL_API_KEY;

app.post('/api/docuseal/builder_token', (req, res) => {
  const token = jwt.sign({
    user_email: 'your-docuseal-user-email@company.com',
    integration_email: 'customer@example.com', // replace with current user email
    name: 'Integration W-9 Test Form',
    document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
  }, secretKey);

  res.json({ token });
});

app.listen(8080, () => {
  console.log(`Server is running`);
});
```

Obtain secret API token (`DOCUSEAL_API_KEY` env variable) to sign JWT from [https://console.docuseal.com/api](https://console.docuseal.com/api).

# License

MIT

---
_Source: https://npm.io/package/@docuseal/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._