Add Device Intelligence to a Vue 3 App

A Vue app talks to your API from the browser, which is exactly where automated signups and credential stuffing come from. Adding device intelligence gives every request a stable visitor ID and a confidence score so you can tell a returning human from a script pretending to be one.

This guide wires Prynt into Vue 3 the idiomatic way: initialize the agent once, expose it through the Composition API, and verify results on your server before you trust them.

Load the agent once as a plugin

The agent should initialize a single time for the whole app. A tiny plugin puts the loaded agent behind provide/inject so any component can reach it without re-loading.

// prynt.js
import { ref } from 'vue'
import Prynt from '@prynt/js'

export const pryntPlugin = {
  async install(app) {
    const agent = ref(null)
    agent.value = await Prynt.load({
      apiKey: import.meta.env.VITE_PRYNT_KEY,
      endpoint: 'https://api.pryntid.com'
    })
    app.provide('prynt', agent)
  }
}

Register it in main.js with app.use(pryntPlugin). Loading is asynchronous and off the render path, so it never blocks first paint.

Identify at the moments that matter

Do not fingerprint on every route change. Call identify() at decision points: submitting a login, opening checkout, or creating an account. A small composable keeps that logic reusable.

// usePrynt.js
import { inject } from 'vue'

export function usePrynt() {
  const agent = inject('prynt')
  async function identify() {
    if (!agent.value) return null
    const result = await agent.value.identify()
    return result.requestId // send this to your backend
  }
  return { identify }
}

In a login component you call identify() on submit and pass the requestId alongside the credentials. The browser never decides anything on its own; it only collects the signal.

Verify the event on your server

The confidence score and visitor ID matter only after your backend confirms them. Never trust the raw client value. Look the event up with your secret key.

// POST /login handler (Node example)
const res = await fetch(
  `https://api.pryntid.com/v1/events/${requestId}`,
  { headers: { Authorization: `Bearer ${process.env.PRYNT_SECRET}` } }
)
const event = await res.json()
if (event.confidence < 0.5 || event.bot.result === 'automated') {
  return reply.code(403).send({ error: 'blocked' })
}

Now the visitor ID is trustworthy: it came from Prynt, not from a field a script can forge. Store it against the account so you can spot the same device creating ten “different” users. The full field list lives in the server-side verification docs.

Protect forms directly

For contact, signup, or login forms you can skip most of the wiring and let Form Shield guard the element. It watches submission behavior and adds signals for scripted fills.

import { onMounted, inject } from 'vue'

onMounted(() => {
  const agent = inject('prynt')
  const form = document.querySelector('#signup')
  agent.value.protectForm(form, {
    autoGuard: true,
    expectedScripts: ['latin']
  })
})

The expectedScripts option flags submissions in unexpected writing systems, a cheap and effective spam signal for Latin-script audiences. See the form protection overview for the tuning options.

Wire signals into your flows

With verification in place, use the score to branch instead of block outright. Low-confidence logins get a step-up challenge; clean checkouts pass straight through. Store the visitor ID and IP intelligence with each event so your fraud rules can query history rather than react in the moment.

Because Prynt runs as a managed cloud service, you get geolocation and ASN data, proxy and VPN flags, and bot detection without maintaining any of that yourself. The free tier covers early traffic, so you can validate the integration before you pay for anything.

Start with the free plan and pricing details, drop the plugin into your Vue app, and you will have trustworthy device signals flowing into your backend within an afternoon.