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.co and use it in the src component prop:

<template>
// ...
  <DocusealForm
    :src="'https://docuseal.co/d/LEVGR9rhZYf86M'"
    :email="'[email protected]'"
  />
// ...
</template>

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

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

// ...

}
</script>

Template 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`);
});