Vue

Install: build from source

WhiskerJS is not on npm yet; the npm package is coming. Build it and install the tarball:

cd whiskerjs
pnpm install && pnpm build && pnpm pack    # writes whiskerjs-0.1.0.tgz
cd ../my-vue-app
npm install ../whiskerjs/whiskerjs-0.1.0.tgz

The component

src/LoginForm.vue:

<script setup lang="ts">
import { ref } from 'vue';
import { load, type Agent } from 'whiskerjs';

const email = ref('');
const password = ref('');
const status = ref('');
const busy = ref(false);

// One agent per page, created on first use. load() is cheap and keeps no state.
let agent: Promise<Agent> | undefined;

async function onSubmit() {
  busy.value = true;
  try {
    // A fresh nonce from your server, then collect. collect() never throws.
    const binding = await (await fetch('/api/whisker-nonce')).json();
    const device = await (await (agent ??= load())).collect({ timeoutMs: 3000, binding });
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ email: email.value, password: password.value, device }),
    });
    status.value = response.ok ? 'Signed in' : `Refused (${response.status})`;
  } catch {
    status.value = 'Network error, please try again';
  } finally {
    busy.value = false;
  }
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <label>Email <input v-model="email" name="email" type="email" required /></label>
    <label>Password <input v-model="password" name="password" type="password" required /></label>
    <button type="submit" :disabled="busy">Sign in</button>
    <output id="status">{{ status }}</output>
  </form>
</template>

Mounted as the app’s root component in src/main.ts:

import { createApp } from 'vue';
import LoginForm from './LoginForm.vue';

createApp(LoginForm).mount('#app');

How it works

• @submit.prevent stops the browser’s own form post, so the handler can add the device result first.
• The agent is created by the first submit (agent ??= load()) and reused after that. load() is cheap and keeps no state between collect() calls.
• The binding. /api/whisker-nonce returns { nonce, timestamp }; collect({ binding }) echoes both in result.binding and adds a digest over the whole result. Your server checks it: Node, Go, PHP, Python.
• Errors. collect() never throws or rejects; the try block covers your two fetch calls.
• busy disables the button while a submit is in flight, so a double click does not use two nonces.

Things to know

• Server rendering (Nuxt and similar). The component’s script setup runs on the server when the page is rendered there. Calling WhiskerJS only from the submit handler (or from onMounted) keeps it in the browser.
• Secure context. Use https, or localhost with the Vite dev server. Without Web Crypto the ids are null.
• Send the result unchanged when the server verifies the binding: the digest covers every field.

Tested

Tested with WhiskerJS 0.1.0 (signalsVersion 5, idVersion 2), Vue 3.5.44, Vite 8.3.5 with @vitejs/plugin-vue 6.0.10, and vue-tsc 3.3.13 on 2026-10-26: built with vue-tsc --noEmit && vite build, served by the Node server and submitted in headless Chromium 140 (Playwright 1.55.0). The server accepted the binding and refused the same result sent a second time.

Questions and answers

Related pages