Vue Integration

VerifyKit does not ship a Vue-specific package — and it does not need one. The @trexolab/verifykit-vanilla build mounts a complete PDF viewer, with the full 8-point signature-verification pipeline, into any DOM element. That makes it drop straight into a Vue component through the standard lifecycle hooks. If you only need the verdict and not the viewer, the @trexolab/verifykit-core engine runs the same way inside a composable or a Pinia store.

Install

Configure the registry scope, then install the vanilla package:

echo '@trexolab:registry=https://verifykit.trexolab.com/api/registry' > .npmrc
npm install @trexolab/verifykit-vanilla

The viewer in a single-file component

Use a template ref for the container, create the viewer in onMounted, and destroy it in onBeforeUnmount. The workerUrl is required — point it at the PDF.js worker (the legacy build is the most compatible).

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import VerifyKit from '@trexolab/verifykit-vanilla'
import '@trexolab/verifykit-vanilla/verifykit.css'
 
const container = ref(null)
let viewer = null
 
onMounted(() => {
  viewer = VerifyKit.create(container.value, {
    workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
    theme: { mode: 'system' },
  })
})
 
onBeforeUnmount(() => {
  viewer?.destroy()
  viewer = null
})
</script>
 
<template>
  <div ref="container" style="width: 100%; height: 100vh"></div>
</template>

VerifyKit.create() returns a VerifyKitInstance. You can also import the factory by name instead of the default: import { create } from '@trexolab/verifykit-vanilla'.

Loading a document

Call load() with a URL string, a File, an ArrayBuffer, or a Uint8Array. It renders the PDF and runs verification, and it resolves with the VerificationResult.

From a URL:

viewer.load('/contract.pdf', 'contract.pdf')

From a file input:

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import VerifyKit from '@trexolab/verifykit-vanilla'
import '@trexolab/verifykit-vanilla/verifykit.css'
 
const container = ref(null)
let viewer = null
 
onMounted(() => {
  viewer = VerifyKit.create(container.value, {
    workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
  })
})
 
onBeforeUnmount(() => viewer?.destroy())
 
function onPick(event) {
  const file = event.target.files?.[0]
  if (file) viewer.load(file, file.name)
}
</script>
 
<template>
  <input type="file" accept=".pdf" @change="onPick" />
  <div ref="container" style="width: 100%; height: 90vh"></div>
</template>

Reading the verification result reactively

load() resolves with the VerificationResult, so you can await it and store the verdict in a ref. You can also read it later with viewer.getVerificationResult() or viewer.getSignatures(), or pass an onVerified callback in the options.

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import VerifyKit from '@trexolab/verifykit-vanilla'
import '@trexolab/verifykit-vanilla/verifykit.css'
 
const container = ref(null)
const status = ref(null)
let viewer = null
 
onMounted(() => {
  viewer = VerifyKit.create(container.value, {
    workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
    onVerified(result) {
      status.value = result.signatures[0]?.overallStatus ?? 'no signatures'
    },
  })
})
 
onBeforeUnmount(() => viewer?.destroy())
 
async function open(file) {
  const result = await viewer.load(file, file.name)
  status.value = result.signatures[0]?.overallStatus ?? 'no signatures'
}
</script>
 
<template>
  <p>Status: {{ status }}</p>
  <div ref="container" style="width: 100%; height: 90vh"></div>
</template>

Each signature's overallStatus is one of valid, warning, invalid, unknown, or pending, and carries the eight individual checks (integrity, signature, certificate chain, expiry, timestamp, revocation, algorithm, EKU). See Core Concepts for the full model.

Headless verification in a composable

When you need the verdict without a viewer — a server route, a background check, or a Pinia store — use @trexolab/verifykit-core directly.

npm install @trexolab/verifykit-core

// composables/useVerifier.js
import { createVerifier } from '@trexolab/verifykit-core'
 
export async function verifyFile(input, fileName) {
  const verifier = await createVerifier()
  try {
    return await verifier.verify(input, fileName)
  } finally {
    verifier.dispose()
  }
}

createVerifier() is async — it initializes the WASM engine. Always call dispose() when you are done to free the WASM memory. For repeated checks, create the verifier once and reuse it rather than creating one per file.

Nuxt and SSR

The viewer and the core engine both require the browser. In Nuxt:

• Put VerifyKit.create() inside onMounted — it never runs during server rendering.
• Or wrap the component that hosts the viewer in <ClientOnly>.
• For headless verification, call it from a client-only context (an event handler, onMounted, or a .client.ts plugin), not during SSR.

Clean up

Always call viewer.destroy() when the component unmounts. In a single-page app, skipping this leaks the WASM instance and the mounted view root across route changes. The onBeforeUnmount hook in the examples above handles it.

Next steps

• Vanilla JS — the full VerifyKit.create() option and method reference this guide builds on
• Core API — createVerifier(), verify(), and the VerificationResult types
• Revocation Checking — add online CRL / OCSP checks
• Core Concepts — how the 8-point verification model works