DocuSeal Vue Components
This package provides a convenient way to embed DocuSeal into Vue apps. Sign documents and create document forms directly in your apps.
Installation
npm install @docuseal/vue
Documentation
For detailed documentation, please click here.
Usage
Signing Form
Copy public DocuSeal form URL from https://docuseal.com and use it in the src component prop:
<template>
// ...
<DocusealForm
:src="'https://docuseal.com/d/LEVGR9rhZYf86M'"
:email="'[email protected]'"
/>
// ...
</template>
<script>
// ...
import { DocusealForm } from '@docuseal/vue'
export default {
name: 'App',
components: {
DocusealForm
},
// ...
}
</script>
Form Builder
<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:
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: '[email protected]',
integration_email: '[email protected]', // 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.
License
MIT