{"_id":"@aho-sdk/components-vue","_rev":"2-fe907e9e7199dea68f55fed4373fc782","name":"@aho-sdk/components-vue","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@aho-sdk/components-vue","version":"0.1.1","keywords":["aho","verify","credential","vue","components"],"license":"MIT","_id":"@aho-sdk/components-vue@0.1.1","maintainers":[{"name":"aho-support","email":"support@aho.com"}],"homepage":"https://aho.com/docs/sdks/ui/vue","bugs":{"url":"https://github.com/aho-hq/aho-verify-js/issues"},"dist":{"shasum":"73df7608bbaf7a4d984db640a32f54a08381741d","tarball":"https://registry.npmjs.org/@aho-sdk/components-vue/-/components-vue-0.1.1.tgz","fileCount":5,"integrity":"sha512-+yZJKohxAlzHg5bRkCnQ8l1UMLwe466vvQyjMdoBv/j+0h3vnKtEmfmtaoFQU9zsPT+0ISpVee40l7KHtc7i6Q==","signatures":[{"sig":"MEYCIQDaYpuL5+QHa2SZOhs47kVvfRk+z+G6rg49H5/sudsoIgIhAMa/5sHyWv5NnK9Nnemmo8rsqDAK9sfJQfHjN2JMIOC7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":97671},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"24bafc3e9ba4991054b15411b00d40929e727ed6","scripts":{"test":"vitest run","build":"vite build","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"aho-support","email":"support@aho.com"},"repository":{"url":"git+https://github.com/aho-hq/aho-verify-js.git","type":"git","directory":"packages/components-vue"},"_npmVersion":"10.7.0","description":"Vue components for Aho credential verification","directories":{},"_nodeVersion":"20.14.0","dependencies":{"@aho-sdk/verify":"^0.1.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","vitest":"^1.0.0","vue-tsc":"^2.0.0","happy-dom":"^20.9.0","typescript":"^5.0.0","@vue/test-utils":"^2.4.0","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/components-vue_0.1.1_1776873429830_0.5469510967736557","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aho-sdk/components-vue","version":"0.1.2","description":"Vue components for Aho credential verification","type":"module","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"vite build","typecheck":"vue-tsc --noEmit","test":"vitest run"},"peerDependencies":{"vue":"^3.3.0"},"dependencies":{"@aho-sdk/verify":"^0.1.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.0","@vue/test-utils":"^2.4.0","happy-dom":"^20.9.0","typescript":"^5.0.0","vite":"^5.0.0","vite-plugin-dts":"^4.5.4","vitest":"^1.0.0","vue":"^3.4.0","vue-tsc":"^2.0.0"},"repository":{"type":"git","url":"git+https://github.com/aho-hq/aho-verify-js.git","directory":"packages/components-vue"},"homepage":"https://aho.com/docs/sdks/ui/vue","bugs":{"url":"https://github.com/aho-hq/aho-verify-js/issues"},"license":"MIT","keywords":["aho","verify","credential","vue","components"],"_id":"@aho-sdk/components-vue@0.1.2","gitHead":"745a46b4667b4f32b7f8d94096cb7d7b22dbec12","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-z7JHPUnlp40K1MWYkRnvbQEVCytVhzkLtd3F3ZDHGWRx+0DMogOeZC6NzaQKMLHUgfeMtwTRGgQ4gyaXNk8i9w==","shasum":"2b009ebcfa11a4b32ed77f1bdc5965e20f2bca48","tarball":"https://registry.npmjs.org/@aho-sdk/components-vue/-/components-vue-0.1.2.tgz","fileCount":5,"unpackedSize":98406,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC7VsfrfFwcSaggt142GN7e2hPg/xyo+lruM842XSCoMQIhAMfg5WoSOJ1O7O487fC6qAGHa6sRatNxiPmE+d/XlAEP"}]},"_npmUser":{"name":"aho-support","email":"support@aho.com"},"directories":{},"maintainers":[{"name":"aho-support","email":"support@aho.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/components-vue_0.1.2_1777567100018_0.14434815030183956"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-22T15:57:09.727Z","modified":"2026-04-30T16:38:20.311Z","0.1.1":"2026-04-22T15:57:09.961Z","0.1.2":"2026-04-30T16:38:20.195Z"},"bugs":{"url":"https://github.com/aho-hq/aho-verify-js/issues"},"license":"MIT","homepage":"https://aho.com/docs/sdks/ui/vue","keywords":["aho","verify","credential","vue","components"],"repository":{"type":"git","url":"git+https://github.com/aho-hq/aho-verify-js.git","directory":"packages/components-vue"},"description":"Vue components for Aho credential verification","maintainers":[{"name":"aho-support","email":"support@aho.com"}],"readme":"# @aho-sdk/components-vue\n\nVue 3 components for Aho credential verification using the Digital Credentials API.\n\n## Installation\n\n```bash\nnpm install @aho-sdk/components-vue\n```\n\n## Quick Start\n\nWrap your app with `AhoProvider` and use `CredentialButton`:\n\n```vue\n<script setup lang=\"ts\">\nimport { AhoProvider, CredentialButton, Claim } from '@aho-sdk/components-vue';\n\nconst config = { apiKey: 'aho_pub_xxx' };\n\nfunction handleVerified(result) {\n  console.log('Verified:', result.verified);\n  console.log('Trusted issuer:', result.issuer?.name);\n}\n</script>\n\n<template>\n  <AhoProvider :config=\"config\">\n    <CredentialButton\n      :claims=\"[Claim.AGE_OVER_21]\"\n      @verified=\"handleVerified\"\n    >\n      Verify Age\n    </CredentialButton>\n  </AhoProvider>\n</template>\n```\n\n## Components\n\n### AhoProvider\n\nContext provider that configures the Aho client for all child components using Vue's provide/inject.\n\n```vue\n<AhoProvider :config=\"{\n  apiKey: 'aho_pub_xxx',\n  clientName: 'My App',\n}\">\n  <!-- children -->\n</AhoProvider>\n```\n\n### CredentialButton\n\nPre-built button for credential verification with built-in state management.\n\n```vue\n<CredentialButton\n  :claims=\"[Claim.AGE_OVER_21]\"\n  :document-types=\"[DocumentType.DRIVERS_LICENSE]\"\n  :disabled=\"false\"\n  class=\"my-custom-class\"\n  @verified=\"handleVerified\"\n  @error=\"handleError\"\n>\n  Verify Age\n\n  <template #loading>\n    Verifying...\n  </template>\n\n  <template #success>\n    Verified!\n  </template>\n\n  <template #error>\n    Try again\n  </template>\n\n  <template #unsupported>\n    Not available\n  </template>\n</CredentialButton>\n```\n\n**State classes:** The button applies CSS classes based on state:\n- `.aho-idle` - Ready to verify\n- `.aho-verifying` - Verification in progress\n- `.aho-success` - Verification succeeded\n- `.aho-error` - Verification failed\n\n### CredentialDisplay\n\nComponent for displaying rendered credentials after verification.\n\n```vue\n<script setup lang=\"ts\">\nimport { CredentialDisplay } from '@aho-sdk/components-vue';\n</script>\n\n<template>\n  <!-- Server-rendered mode (typical post-verification) -->\n  <CredentialDisplay :src=\"result.renderUrl\" />\n\n  <!-- With options -->\n  <CredentialDisplay\n    :src=\"result.renderUrl\"\n    size=\"large\"\n    enable-download\n    @loaded=\"(format, templateKey) => console.log('Loaded:', format)\"\n    @error=\"(error) => console.error('Failed:', error)\"\n  />\n\n  <!-- Controlled mode (pre-fetched data) -->\n  <CredentialDisplay\n    :data=\"{ format: 'svg', content: '<svg>...</svg>' }\"\n  />\n</template>\n```\n\n**Props:**\n- `src` - URL to fetch rendered credential\n- `data` - Pre-fetched render response data\n- `size` - Size variant: `\"compact\"`, `\"default\"`, `\"large\"`\n- `loadingText` - Text shown while loading\n- `errorText` - Text shown on error\n- `enableDownload` - Show download button\n\n**Events:**\n- `@loaded` - Emitted when content loads (format, templateKey?)\n- `@error` - Emitted when loading fails (error)\n- `@download` - Emitted when download is triggered (format, filename)\n\n**CSS Custom Properties:**\n```css\n.my-credential-display {\n  --aho-display-bg: #ffffff;\n  --aho-display-border: 1px solid #e5e7eb;\n  --aho-display-radius: 0.75rem;\n  --aho-display-compact-width: 280px;\n  --aho-display-default-width: 400px;\n  --aho-display-large-width: 600px;\n}\n```\n\n## Composables\n\n### useAho\n\nAccess the Aho context from any component inside `AhoProvider`:\n\n```vue\n<script setup lang=\"ts\">\nimport { useAho, Claim } from '@aho-sdk/components-vue';\n\nconst { verify, state, isVerifying, isSupported, result } = useAho();\n</script>\n\n<template>\n  <p v-if=\"!isSupported\">Browser not supported</p>\n  <button v-else @click=\"verify({ claims: [Claim.AGE_OVER_21] })\">\n    {{ isVerifying ? 'Verifying...' : 'Verify' }}\n  </button>\n</template>\n```\n\n### useCredentialVerify\n\nStandalone composable for verification without `AhoProvider`:\n\n```vue\n<script setup lang=\"ts\">\nimport { useCredentialVerify, Claim } from '@aho-sdk/components-vue';\n\nconst { verify, state, isVerifying, result, error, isSupported } = useCredentialVerify({\n  apiKey: 'aho_pub_xxx',\n  onStateChange: (state) => console.log('State:', state),\n  onComplete: (result) => console.log('Result:', result),\n  onError: (error) => console.error('Error:', error),\n});\n</script>\n\n<template>\n  <button\n    @click=\"verify({ claims: [Claim.AGE_OVER_21] })\"\n    :disabled=\"isVerifying || !isSupported\"\n  >\n    Verify\n  </button>\n</template>\n```\n\n## Re-exports\n\nThis package re-exports commonly used items from `@aho-sdk/verify`:\n\n```ts\nimport {\n  // Client\n  AhoVerify,\n  createClient,\n\n  // Constants\n  Claim,\n  DocumentType,\n\n  // Functions\n  isSupported,\n  detectPlatform,\n\n  // Errors\n  AhoError,\n  VerifyError,\n} from '@aho-sdk/components-vue';\n\n// Types\nimport type {\n  AhoVerifyConfig,\n  ClaimType,\n  DocumentTypeValue,\n  VerifyState,\n  VerifyResult,\n  VerifyOptions,\n  IssuerInfo,\n  ErrorCode,\n  Platform,\n} from '@aho-sdk/components-vue';\n```\n\n## Browser Support\n\nThe Digital Credentials API is available in:\n- Chrome 128+ (Android)\n- Chrome (Desktop with flag enabled)\n\nUse `isSupported()` to check availability at runtime.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}