Skip to main content

Vue

Vue components and composables for verification flows

Installation

npm 
npm install @aho-sdk/components-vue

Quick Start

Install the Vue SDK:

npm install @aho-sdk/components-vue

Import and use the components:

<script setup lang="ts">
import { AhoProvider, CredentialButton, Claim } from '@aho-sdk/components-vue';

const config = { publishableKey: 'aho_pub_xxx' };
</script>

<template>
  <AhoProvider :config="config">
    <CredentialButton
      :claims="[Claim.AGE_OVER_21]"
>Request multiple claims:

<CredentialButton
  :claims="[Claim.GIVEN_NAME, Claim.FAMILY_NAME, Claim.AGE_OVER_21]"

Examples

Basic Usage

Simple age verification with a single claim.

import { createApp, h, ref } from 'vue';
import { AhoProvider, CredentialButton, Claim } from '@aho-sdk/components-vue';

const BasicDemo = {
  setup() {
    return () => (
      <AhoProvider config={{ publishableKey: 'aho_pub_xxx', nonce: '...' }}>
        <CredentialButton
          claims={[Claim.AGE_OVER_21]}
          onVerified={(result) => console.log('Verified:', result)}
        >
          Verify Age
        </CredentialButton>
      </AhoProvider>
    );
  }
};

createApp(BasicDemo).mount('#vue-basic-demo');

Custom Styling

Customize button appearance with CSS custom properties.

import { createApp, h } from 'vue';
import { AhoProvider, CredentialButton, Claim } from '@aho-sdk/components-vue';

const StyledDemo = {
  setup() {
    return () => (
      <AhoProvider config={{ publishableKey: 'aho_pub_xxx', nonce: '...' }}>
        <CredentialButton
          claims={[Claim.GIVEN_NAME, Claim.FAMILY_NAME]}
          class="custom-button"
          onVerified={(result) => console.log('Verified:', result)}
        >
          Verify Identity
        </CredentialButton>
      </AhoProvider>
    );
  }
};

createApp(StyledDemo).mount('#vue-styled-demo');
.custom-button {
  --aho-button-bg: #059669;
  --aho-button-bg-hover: #047857;
  --aho-button-radius: 9999px;
}

Event Handling

Handle verification lifecycle with callbacks.

import { createApp, h, ref } from 'vue';
import { AhoProvider, CredentialButton, Claim } from '@aho-sdk/components-vue';

const EventsDemo = {
  setup() {
    const log = ref('Click button to see events...');
    const addLog = (msg) => { log.value += '\n' + new Date().toISOString().substr(11, 12) + ' ' + msg; };

    return () => (
      <AhoProvider config={{ publishableKey: 'aho_pub_xxx', nonce: '...' }}>
        <CredentialButton
          claims={[Claim.AGE_OVER_18]}
          onVerified={(result) => addLog('verified: ' + JSON.stringify({ verified: result.verified }))}
          onError={(error) => addLog('error: ' + error.message)}
        >
          Verify (Watch Events)
        </CredentialButton>
        <pre class="mt-4 bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-auto max-h-40">{log.value}</pre>
      </AhoProvider>
    );
  }
};

createApp(EventsDemo).mount('#vue-events-demo');

Credential Display

After verification, display the credential card automatically.

import { createApp, h, ref } from 'vue';
import { AhoProvider, CredentialButton, CredentialDisplay, ALL_CLAIMS } from '@aho-sdk/components-vue';

const DisplayDemo = {
  setup() {
    const renderUrl = ref(null);

    return () => (
      <AhoProvider config={{ publishableKey: 'aho_pub_xxx', nonce: '...' }}>
        <CredentialButton
          claims={ALL_CLAIMS}
          onVerified={(result) => { renderUrl.value = result.renderUrl; }}
        >
          Verify Identity
        </CredentialButton>
        {renderUrl.value && (
          <div class="mt-4">
            <p class="text-green-600 font-medium mb-2">Verification successful!</p>
            <CredentialDisplay src={renderUrl.value} enableDownload />
          </div>
        )}
      </AhoProvider>
    );
  }
};

createApp(DisplayDemo).mount('#vue-display-demo');

Display Size Variants

Display credentials in compact (280px), default (400px), or large (600px) max-widths.

import { createApp, h } from 'vue';
import { CredentialDisplay } from '@aho-sdk/components-vue';

const compactData = compactData;
const defaultData = defaultData;
const largeData = largeData;

const SizesDemo = {
  setup() {
    return () => (
      <div class="space-y-6">
        <div>
          <p class="text-sm font-medium text-gray-500 mb-2">Compact (max-width: 280px)</p>
          <CredentialDisplay size="compact" data={compactData} nonce="..." />
        </div>
        <div>
          <p class="text-sm font-medium text-gray-500 mb-2">Default (max-width: 400px)</p>
          <CredentialDisplay data={defaultData} nonce="..." />
        </div>
        <div>
          <p class="text-sm font-medium text-gray-500 mb-2">Large (max-width: 600px)</p>
          <CredentialDisplay size="large" data={largeData} nonce="..." />
        </div>
      </div>
    );
  }
};

createApp(SizesDemo).mount('#vue-sizes-demo');

Display Styling

Customize display appearance with CSS custom properties.

import { createApp, h } from 'vue';
import { CredentialDisplay } from '@aho-sdk/components-vue';

const styledData = styledData;

const StyledDisplayDemo = {
  setup() {
    return () => <CredentialDisplay data={styledData} class="custom-display" nonce="..." />;
  }
};

createApp(StyledDisplayDemo).mount('#vue-styled-display-demo');
.custom-display {
  --aho-display-bg: #1f2937;
  --aho-display-border: 2px solid #4ade80;
  --aho-display-radius: 1rem;
}

Display Events

Handle display lifecycle with callbacks.

<CredentialDisplay
  :src="renderUrl"

API Reference

<CredentialButton>

A Vue component that initiates the credential verification flow.

Props

Prop Type Default Description
publishableKey string — Publishable key (aho_pub_xxx). Required unless set via configure() or AhoProvider.
claims string | string[] — Claims to request. Comma-separated string or array. Use 'all' for all claims.
returnClaims boolean | 'all' | string[] true Which claims to return in the result. true=all requested, false=none, 'all'=all, array=specific claims. Must be subset of claims.
documentTypes string | string[] all Accepted document types (e.g., 'mDL', 'passport'). Defaults to all.
clientName string — Display name shown in wallet dialog.
baseUrl string https://api.aho.com API base URL. Defaults to production.
unsupported 'hide' | 'disable' | 'fallback' disable Behavior when browser doesn't support Digital Credentials API.
disabled boolean false Disable the button.

Emits

Event Type Description
@verified (result: VerifyResult) Emitted when verification succeeds
@error (error: Error) Emitted when verification fails
@state-change (state: VerifyState) Emitted when state changes

Slots

Slot Description
default Button content (default: "Verify Credential")
#loading Content shown while verifying
#success Content shown on success
#error Content shown on error
#unsupported Content shown when browser unsupported

<CredentialDisplay>

A Vue component that displays a rendered credential.

Props

Prop Type Default Description
src string — URL to fetch rendered credential from.
data string | object — Pre-fetched render response. JSON string (web) or object (React/Vue).
size 'compact' | 'default' | 'large' default Display size variant. Controls max-width.
enableDownload boolean false Show download button on hover.
loadingText string Loading... Text shown while loading.
errorText string Failed to load credential Text shown on error.
verifyAuthenticity boolean false Verify credential authenticity and show trust indicator with link to verification page.

Emits

Event Type Description
@loaded (format: string, templateKey?: string) Emitted when content loads
@error (error: Error) Emitted when loading fails
@download (format: string, filename: string) Emitted when download triggered

AhoPlugin

Vue plugin for configuration.

Config Options

Property Type Description
publishableKey * string Publishable key (aho_pub_xxx)
baseUrl string Override API base URL
nonce string CSP nonce for child components