@aho-sdk/components-vue

Vue 3 components for Aho credential verification using the Digital Credentials API.

Installation

npm install @aho-sdk/components-vue

Quick Start

Wrap your app with AhoProvider and use CredentialButton:

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

const config = { apiKey: 'aho_pub_xxx' };

function handleVerified(result) {
  console.log('Verified:', result.verified);
  console.log('Trusted issuer:', result.issuer?.name);
}
</script>

<template>
  <AhoProvider :config="config">
    <CredentialButton
      :claims="[Claim.AGE_OVER_21]"
      @verified="handleVerified"
    >
      Verify Age
    </CredentialButton>
  </AhoProvider>
</template>

Components

AhoProvider

Context provider that configures the Aho client for all child components using Vue's provide/inject.

<AhoProvider :config="{
  apiKey: 'aho_pub_xxx',
  clientName: 'My App',
}">
  <!-- children -->
</AhoProvider>

CredentialButton

Pre-built button for credential verification with built-in state management.

<CredentialButton
  :claims="[Claim.AGE_OVER_21]"
  :document-types="[DocumentType.DRIVERS_LICENSE]"
  :disabled="false"
  class="my-custom-class"
  @verified="handleVerified"
  @error="handleError"
>
  Verify Age

  <template #loading>
    Verifying...
  </template>

  <template #success>
    Verified!
  </template>

  <template #error>
    Try again
  </template>

  <template #unsupported>
    Not available
  </template>
</CredentialButton>

State classes: The button applies CSS classes based on state:

• .aho-idle - Ready to verify
• .aho-verifying - Verification in progress
• .aho-success - Verification succeeded
• .aho-error - Verification failed

CredentialDisplay

Component for displaying rendered credentials after verification.

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

<template>
  <!-- Server-rendered mode (typical post-verification) -->
  <CredentialDisplay :src="result.renderUrl" />

  <!-- With options -->
  <CredentialDisplay
    :src="result.renderUrl"
    size="large"
    enable-download
    @loaded="(format, templateKey) => console.log('Loaded:', format)"
    @error="(error) => console.error('Failed:', error)"
  />

  <!-- Controlled mode (pre-fetched data) -->
  <CredentialDisplay
    :data="{ format: 'svg', content: '<svg>...</svg>' }"
  />
</template>

Props:

• src - URL to fetch rendered credential
• data - Pre-fetched render response data
• size - Size variant: "compact", "default", "large"
• loadingText - Text shown while loading
• errorText - Text shown on error
• enableDownload - Show download button

Events:

• @loaded - Emitted when content loads (format, templateKey?)
• @error - Emitted when loading fails (error)
• @download - Emitted when download is triggered (format, filename)

CSS Custom Properties:

.my-credential-display {
  --aho-display-bg: #ffffff;
  --aho-display-border: 1px solid #e5e7eb;
  --aho-display-radius: 0.75rem;
  --aho-display-compact-width: 280px;
  --aho-display-default-width: 400px;
  --aho-display-large-width: 600px;
}

Composables

useAho

Access the Aho context from any component inside AhoProvider:

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

const { verify, state, isVerifying, isSupported, result } = useAho();
</script>

<template>
  <p v-if="!isSupported">Browser not supported</p>
  <button v-else @click="verify({ claims: [Claim.AGE_OVER_21] })">
    {{ isVerifying ? 'Verifying...' : 'Verify' }}
  </button>
</template>

useCredentialVerify

Standalone composable for verification without AhoProvider:

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

const { verify, state, isVerifying, result, error, isSupported } = useCredentialVerify({
  apiKey: 'aho_pub_xxx',
  onStateChange: (state) => console.log('State:', state),
  onComplete: (result) => console.log('Result:', result),
  onError: (error) => console.error('Error:', error),
});
</script>

<template>
  <button
    @click="verify({ claims: [Claim.AGE_OVER_21] })"
    :disabled="isVerifying || !isSupported"
  >
    Verify
  </button>
</template>

Re-exports

This package re-exports commonly used items from @aho-sdk/verify:

import {
  // Client
  AhoVerify,
  createClient,

  // Constants
  Claim,
  DocumentType,

  // Functions
  isSupported,
  detectPlatform,

  // Errors
  AhoError,
  VerifyError,
} from '@aho-sdk/components-vue';

// Types
import type {
  AhoVerifyConfig,
  ClaimType,
  DocumentTypeValue,
  VerifyState,
  VerifyResult,
  VerifyOptions,
  IssuerInfo,
  ErrorCode,
  Platform,
} from '@aho-sdk/components-vue';

Browser Support

The Digital Credentials API is available in:

• Chrome 128+ (Android)
• Chrome (Desktop with flag enabled)

Use isSupported() to check availability at runtime.

License

MIT