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

# Vue Integration

> Learn how to use our embedding SDK within your Vue application.

# Vue Integration

Our Vue SDK provides a simple way to embed a signing experience within your Vue application. It supports both direct link templates and signing tokens.

## Installation

To install the SDK, run the following command:

```bash theme={null}
npm install @documenso/embed-vue
```

## Usage

To embed a signing experience, you'll need to provide the token for the document you want to embed. This can be done in a few different ways, depending on your use case.

### Direct Link Template

If you have a direct link template, you can simply provide the token for the template to the `EmbedDirectTemplate` component.

```html theme={null}
<script setup lang="ts">
  import { EmbedDirectTemplate } from '@documenso/embed-vue';

  const token = ref('YOUR_TOKEN_HERE'); // Replace with the actual token
</script>

<template>
  <EmbedDirectTemplate :token="token" />
</template>
```

#### Props

| Prop                | Type                | Description                                                                                |
| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
| token               | string              | The token for the document you want to embed                                               |
| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
| name                | string (optional)   | The name the signer that will be used by default for signing                               |
| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
| email               | string (optional)   | The email the signer that will be used by default for signing                              |
| lockEmail           | boolean (optional)  | Whether or not the email field should be locked disallowing modifications                  |
| externalId          | string (optional)   | The external ID to be used for the document that will be created upon completion           |
| css                 | string (optional)   | Custom CSS to style the embedded component (Platform Plan only)                            |
| cssVars             | object (optional)   | CSS variables for customizing colors, spacing, etc. (Platform Plan only)                   |
| darkModeDisabled    | boolean (optional)  | Disable dark mode functionality (Platform Plan only)                                       |
| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |
| onFieldSigned       | function (optional) | A callback function that will be called when a field has been signed                       |
| onFieldUnsigned     | function (optional) | A callback function that will be called when a field has been unsigned                     |

### Signing Token

If you have a signing token, you can provide it to the `EmbedSignDocument` component.

```jsx theme={null}
import { EmbedSignDocument } from '@documenso/embed-vue';

const MyEmbeddingComponent = () => {
  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token

  return <EmbedSignDocument token={token} />;
};
```

#### Props

| Prop                | Type                | Description                                                                                |
| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
| token               | string              | The token for the document you want to embed                                               |
| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
| name                | string (optional)   | The name the signer that will be used by default for signing                               |
| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |

### Styling and Theming (Platform Plan)

Platform customers have access to advanced styling options:

```html theme={null}
<script setup lang="ts">
  import { EmbedDirectTemplate } from '@documenso/embed-vue';

  const token = ref('your-token');
  const customCss = `
  .documenso-embed {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
`;
  const cssVars = {
    colorPrimary: '#0000FF',
    colorBackground: '#F5F5F5',
    borderRadius: '8px',
  };
</script>

<template>
  <EmbedDirectTemplate
    :token="token"
    :css="customCss"
    :cssVars="cssVars"
    :darkModeDisabled="true"
  />
</template>
```