Skip to main content

Vue 3 example

On this page you can find the example usage of Autograph client in Vue 3 app. We will use <script setup> syntax and Composition API.

Install​

Make sure you have the package installed:

npm install autograph-client

Create instance​

Import class from node modules and create new instance. Please notice, we are using ref to save instance to a variable:

<script setup>
import Autograph from 'autograph-client'

const autograph = ref(new Autograph())
</script>

In rest of the code we can now refer to the instance as autograph.value.

Render component​

Container element​

Next step is to render the component in DOM. For this we will need a container element ref:

<template>
  <div class="App">
    <div class="client-parent-container" ref="clientContainerRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

// ...
const clientContainerRef = ref(null)
// ...
</script>

Initial rendering​

As having a container element is critical part for us to start, best place for the first-time rendering will be the onMounted hook, as there we will have our element ref already available:

<script setup>
import { onMounted } from 'vue'

// ...

onMounted(() => {
  renderclient()
})

function renderclient() {
  if (!token.value || !clientContainerRef.value) return

  autograph.value.render({
    apiKey: apiKey.value,
    appMode: appMode.value,
    containerElement: clientContainerRef.value,
    signFileId: signFileId.value,
    templateId: templateId.value,
    token: token.value,
  })
}

// ...
</script>

Dynamically render when parameters change​

To support app mode change, selecting another template ID or any other parameter change, we can use watch hook:

<script setup>
import { watch } from 'vue'

// ...

watch([appMode, token, signFileId, templateId], renderclient)

// ...
</script>

Subscribing to events​

Alongside rendering call you would likely want to subscribe to the client events. That should happen in the same renderclient (name is up to you) function:

<script setup>
import { onMounted } from 'vue'

// ...

function renderclient() {
  if (!token.value || !clientContainerRef.value) return

  autograph.value.render({
    /* ..config object.. */
  })

  autograph.value.on('general-success', eventPayload => {
    showToast(eventPayload.messageText)
  })

  // ... all other events you need
}

// ...
</script>

Please refer to Events page for all available events documentation.

Complete example​

This is how the implementation in a single-file app would look like:

<template>
  <div class="App">
    <div class="client-parent-container" ref="clientContainerRef" />
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import Autograph from 'autograph-client'

// User token generation is out of scope
const token = getUserToken()
const apiKey = 'your-autograph-api-key'
// Please take care of setting this if using "sign" app mode
const signFileId = ref('')
// or this if using "prepareDocumentWithTemplate" one.
const templateId = ref('')

const appMode = ref('prepareDocument')

const clientContainerRef = ref(null)

const autograph = ref(new Autograph())

function logout() {
  token.value = ''
  appMode.value = null
  autograph.value.destroy()
}

function showToast(message = '', isError = false) {
  // toast implementation
}

function renderclient() {
  if (!token.value || !clientContainerRef.value) return

  if (!appMode.value) {
    autograph.value.destroy()
    return
  }

  autograph.value.render({
    apiKey: apiKey.value,
    appMode: appMode.value,
    containerElement: clientContainerRef.value,
    signFileId: signFileId.value,
    templateId: templateId.value,
    token: token.value,
  })

  autograph.value.on('document-prepared', () => {
    showToast('Document prepared!')
  })

  autograph.value.on('document-signed', () => {
    showToast('Document signed!')
  })

  autograph.value.on('template-prepared', () => {
    showToast('Template prepared!')
  })

  autograph.value.on('general-error', eventPayload => {
    showToast(eventPayload.messageText, true)
  })

  autograph.value.on('general-exit', () => {
    showToast('General exit')
    appMode.value = null
  })

  autograph.value.on('general-success', eventPayload => {
    showToast(eventPayload.messageText)
  })

  autograph.value.on('auth-error', () => {
    showToast('Authentication error', true)
    logout()
  })
}

onMounted(() => {
  renderclient()
})

watch([appMode, token, signFileId, templateId], renderclient)
</script>