{"_id":"@0xbojack/fhevm-vue","_rev":"2-9ad3ab3234e1d2bbb53a6624526cdef1","name":"@0xbojack/fhevm-vue","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@0xbojack/fhevm-vue","version":"0.2.0","keywords":["fhevm","fhe","encryption","vue","vue3","composables","privacy","zama","blockchain"],"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","_id":"@0xbojack/fhevm-vue@0.2.0","maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"homepage":"https://github.com/zama-ai/fhevm-sdk#readme","bugs":{"url":"https://github.com/zama-ai/fhevm-sdk/issues"},"dist":{"shasum":"edb3e14f59eeaeeead106034ee9ffa23482e20c2","tarball":"https://registry.npmjs.org/@0xbojack/fhevm-vue/-/fhevm-vue-0.2.0.tgz","fileCount":9,"integrity":"sha512-wofG06r6F61tGib5rlGTxiJKZIoqMnYC8fgx+4gyG5QWadOKVl24Uiq2WKeSndx/M6/LMwd4aIltqtxQtRQd6Q==","signatures":[{"sig":"MEUCIQD9a7aP/4AicxoWhYPW7GH78qFMutxk8G8YM0/Kai1hQwIgQkpajSjNuLteMo60Rx1mDhWK1I8gBHZWZcTWl+PghSY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":74030},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"ff17a53b95b33a83c2bd89c3b608290641d2be72","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","clean":"rm -rf dist","test:watch":"vitest","prepublishOnly":"pnpm build"},"_npmUser":{"name":"0xbojack","email":"coderbojack@gmail.com"},"repository":{"url":"git+https://github.com/zama-ai/fhevm-sdk.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Vue 3 composables for FHEVM SDK","directories":{},"sideEffects":false,"_nodeVersion":"20.19.4","dependencies":{"@0xbojack/fhevm-core":"^0.2.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.5.0","vitest":"^2.1.9","typescript":"^5.9.2","@types/node":"^22.7.5","@vue/test-utils":"^2.4.6"},"peerDependencies":{"vue":"^3.0.0","ethers":"^6.13.7"},"_npmOperationalInternal":{"tmp":"tmp/fhevm-vue_0.2.0_1761115697993_0.8786854530250041","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@0xbojack/fhevm-vue","version":"0.2.1","description":"Vue 3 composables for FHEVM SDK","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest run","test:watch":"vitest","clean":"rm -rf dist","prepublishOnly":"pnpm build"},"engines":{"node":">=18.0.0"},"sideEffects":false,"keywords":["fhevm","fhe","encryption","vue","vue3","composables","privacy","zama","blockchain"],"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","repository":{"type":"git","url":"git+https://github.com/huaigu/fhevm-sdk.git","directory":"packages/vue"},"homepage":"https://github.com/huaigu/fhevm-sdk/tree/main/packages/vue#readme","bugs":{"url":"https://github.com/huaigu/fhevm-sdk/issues"},"dependencies":{"@0xbojack/fhevm-core":"^0.2.0"},"peerDependencies":{"vue":"^3.0.0","ethers":"^6.13.7"},"devDependencies":{"@vue/test-utils":"^2.4.6","@types/node":"^22.7.5","tsup":"^8.5.0","typescript":"^5.9.2","vitest":"^2.1.9","vue":"^3.5.13"},"_id":"@0xbojack/fhevm-vue@0.2.1","gitHead":"c07f422db6ea84e5cdbb2866228f8181f2bfa6a3","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-U8De376+rj80nfkkxxtFxApUqKp5RCi2jvccTcQSpUEX0Ys9V/bJgfs7FtE7PlpXS0lOPv9rQbrw5n7AN2Z+3Q==","shasum":"b914ff6d630cbc29506cc2ea6bb427f4492af7ba","tarball":"https://registry.npmjs.org/@0xbojack/fhevm-vue/-/fhevm-vue-0.2.1.tgz","fileCount":9,"unpackedSize":74050,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCX8rms9qLVK2T1/IGGc1/29OsNAqbW9iTwMANRfvQz8gIgEy7pl5wblkROLhws50Dub0r4iNlyEbZA5cbTmoIhqjs="}]},"_npmUser":{"name":"0xbojack","email":"coderbojack@gmail.com"},"directories":{},"maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fhevm-vue_0.2.1_1761116200979_0.346173479481646"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-22T06:48:17.919Z","modified":"2025-10-22T06:56:41.372Z","0.2.0":"2025-10-22T06:48:18.203Z","0.2.1":"2025-10-22T06:56:41.182Z"},"bugs":{"url":"https://github.com/huaigu/fhevm-sdk/issues"},"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","homepage":"https://github.com/huaigu/fhevm-sdk/tree/main/packages/vue#readme","keywords":["fhevm","fhe","encryption","vue","vue3","composables","privacy","zama","blockchain"],"repository":{"type":"git","url":"git+https://github.com/huaigu/fhevm-sdk.git","directory":"packages/vue"},"description":"Vue 3 composables for FHEVM SDK","maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"readme":"# @fhevm/vue\n\nVue 3 composables for FHEVM SDK - Build privacy-preserving dApps with Fully Homomorphic Encryption.\n\n## Features\n\n- 🎯 **Vue 3 Composables**: Intuitive composition API (useInit, useEncrypt, useDecrypt)\n- 🔌 **Plugin System**: Simple setup with Vue plugin\n- 🔄 **Auto-cleanup**: Automatic resource cleanup on unmount\n- 📊 **Reactive State**: Built-in reactive loading and error states\n- 🎯 **TypeScript**: Full type safety and IntelliSense support\n- ⚡ **Framework-Agnostic Core**: Built on @fhevm/core\n\n## Installation\n\n```bash\nnpm install @fhevm/vue @fhevm/core ethers\n# or\npnpm add @fhevm/vue @fhevm/core ethers\n# or\nyarn add @fhevm/vue @fhevm/core ethers\n```\n\n## Quick Start\n\n### 1. Setup Plugin\n\nInstall the FHEVM plugin in your Vue app:\n\n```ts\n// main.ts\nimport { createApp } from 'vue';\nimport { createFhevm, IndexedDBStorage } from '@fhevm/vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\n\nconst fhevm = createFhevm({\n  config: { storage: new IndexedDBStorage() }\n});\n\napp.use(fhevm);\napp.mount('#app');\n```\n\n### 2. Initialize FHEVM\n\n```vue\n<script setup lang=\"ts\">\nimport { useInit } from '@fhevm/vue';\nimport { BrowserProvider } from 'ethers';\nimport { onMounted } from 'vue';\n\nconst { init, status, error, isReady } = useInit();\n\nonMounted(async () => {\n  const provider = new BrowserProvider(window.ethereum);\n  await init({ provider });\n});\n</script>\n\n<template>\n  <div v-if=\"status === 'loading'\">Initializing FHEVM...</div>\n  <div v-else-if=\"error\">Error: {{ error.message }}</div>\n  <div v-else-if=\"isReady\">FHEVM Ready ✅</div>\n  <button v-else @click=\"init({ provider })\">Initialize</button>\n</template>\n```\n\n### 3. Encrypt Data\n\n```vue\n<script setup lang=\"ts\">\nimport { useEncrypt, useStatus } from '@fhevm/vue';\n\nconst { encrypt, data, isLoading, error } = useEncrypt();\nconst { isReady } = useStatus();\n\nconst handleEncrypt = async () => {\n  await encrypt({\n    value: 42,\n    type: 'euint32',\n    contractAddress: '0x...',\n    userAddress: '0x...',\n  });\n};\n</script>\n\n<template>\n  <div v-if=\"!isReady\">Please initialize FHEVM first</div>\n  <div v-else>\n    <button @click=\"handleEncrypt\" :disabled=\"isLoading\">\n      {{ isLoading ? 'Encrypting...' : 'Encrypt Value' }}\n    </button>\n    <div v-if=\"error\">Error: {{ error.message }}</div>\n    <pre v-if=\"data\">{{ JSON.stringify(data, null, 2) }}</pre>\n  </div>\n</template>\n```\n\n### 4. Decrypt Data\n\n```vue\n<script setup lang=\"ts\">\nimport { useDecrypt } from '@fhevm/vue';\nimport { BrowserProvider } from 'ethers';\n\nconst { decrypt, data, isLoading, error } = useDecrypt();\n\nconst handleDecrypt = async () => {\n  const provider = new BrowserProvider(window.ethereum);\n  const signer = await provider.getSigner();\n\n  await decrypt(\n    [{ handle: '0x...', contractAddress: '0x...' }],\n    signer\n  );\n};\n</script>\n\n<template>\n  <button @click=\"handleDecrypt\" :disabled=\"isLoading\">\n    {{ isLoading ? 'Decrypting...' : 'Decrypt' }}\n  </button>\n  <div v-if=\"data\">Result: {{ JSON.stringify(data) }}</div>\n  <div v-if=\"error\">Error: {{ error.message }}</div>\n</template>\n```\n\n## API Reference\n\n### Plugin\n\n#### `createFhevm(options?)`\n\nCreate the FHEVM Vue plugin.\n\n**Parameters:**\n- `options.config?: FhevmConfig` - Optional FHEVM configuration\n\n**Returns:** Vue plugin object\n\n**Example:**\n```ts\nimport { createFhevm, IndexedDBStorage } from '@fhevm/vue';\n\nconst fhevm = createFhevm({\n  config: { storage: new IndexedDBStorage() }\n});\n\napp.use(fhevm);\n```\n\n### Composables\n\n#### `useInit()`\n\nInitialize the FHEVM instance.\n\n**Returns:**\n- `init: (params: InitParams) => Promise<FhevmInstance | null>` - Initialize function\n- `status: Ref<FhevmStatus>` - Current status\n- `instance: Ref<FhevmInstance | null>` - FHEVM instance\n- `error: Ref<Error | null>` - Error if initialization failed\n- `cancel: () => void` - Cancel ongoing initialization\n- `isIdle: Ref<boolean>` - Whether status is 'idle'\n- `isLoading: Ref<boolean>` - Whether status is 'loading'\n- `isReady: Ref<boolean>` - Whether status is 'ready'\n- `isError: Ref<boolean>` - Whether status is 'error'\n\n**Example:**\n```vue\n<script setup>\nconst { init, status, isReady, cancel } = useInit();\n\n// Initialize\nawait init({ provider });\n\n// Or with RPC URL\nawait init({ provider: 'http://localhost:8545', chainId: 31337 });\n\n// Cancel if needed\ncancel();\n</script>\n```\n\n#### `useEncrypt()`\n\nEncrypt data for on-chain computation.\n\n**Returns:**\n- `encrypt: (params: EncryptParams) => Promise<EncryptResult | null>` - Encrypt function\n- `data: Ref<EncryptResult | null>` - Encrypted result\n- `isLoading: Ref<boolean>` - Loading state\n- `error: Ref<Error | null>` - Error if encryption failed\n- `reset: () => void` - Reset state\n\n**Supported Types:**\n- `ebool` - Encrypted boolean\n- `euint8`, `euint16`, `euint32`, `euint64`, `euint128`, `euint256` - Encrypted unsigned integers\n- `eaddress` - Encrypted address\n\n**Example:**\n```vue\n<script setup>\nconst { encrypt, data, isLoading, reset } = useEncrypt();\n\nawait encrypt({\n  value: 100,\n  type: 'euint32',\n  contractAddress: '0x...',\n  userAddress: '0x...',\n});\n\n// Reset state\nreset();\n</script>\n```\n\n#### `useDecrypt()`\n\nDecrypt encrypted data (requires user signature).\n\n**Returns:**\n- `decrypt: (requests: DecryptRequest[], signer: JsonRpcSigner) => Promise<DecryptResult | null>` - Decrypt function\n- `data: Ref<DecryptResult | null>` - Decrypted result\n- `isLoading: Ref<boolean>` - Loading state\n- `error: Ref<Error | null>` - Error if decryption failed\n- `reset: () => void` - Reset state\n\n**Example:**\n```vue\n<script setup>\nconst { decrypt, data, isLoading } = useDecrypt();\n\nconst provider = new BrowserProvider(window.ethereum);\nconst signer = await provider.getSigner();\n\nawait decrypt(\n  [\n    { handle: '0x...', contractAddress: '0x...' },\n    { handle: '0x...', contractAddress: '0x...' },\n  ],\n  signer\n);\n</script>\n```\n\n#### `useStatus()`\n\nGet current status with reactive computed properties.\n\n**Returns:**\n- `status: Ref<FhevmStatus>` - Current status\n- `isIdle: Ref<boolean>` - Whether status is 'idle'\n- `isLoading: Ref<boolean>` - Whether status is 'loading'\n- `isReady: Ref<boolean>` - Whether status is 'ready'\n- `isError: Ref<boolean>` - Whether status is 'error'\n\n**Example:**\n```vue\n<script setup>\nconst { status, isReady, isLoading, isError } = useStatus();\n</script>\n\n<template>\n  <Spinner v-if=\"isLoading\" />\n  <Error v-else-if=\"isError\" />\n  <App v-else-if=\"isReady\" />\n</template>\n```\n\n#### `usePublicKey()`\n\nGet the public key for encryption (only available after initialization).\n\n**Returns:**\n- `publicKey: Ref<string | null>` - Public key (null if not ready)\n- `error: Ref<Error | null>` - Error if getting public key failed\n\n**Example:**\n```vue\n<script setup>\nconst { publicKey, error } = usePublicKey();\n</script>\n\n<template>\n  <div v-if=\"publicKey\">Public key: {{ publicKey }}</div>\n</template>\n```\n\n#### `useFhevmClient()`\n\nAccess the FHEVM client directly.\n\n**Returns:** `FhevmClient` - FHEVM client instance\n\n**Example:**\n```vue\n<script setup>\nimport { useFhevmClient } from '@fhevm/vue';\n\nconst client = useFhevmClient();\n\n// Direct access to client methods\nconst instance = client.getInstance();\n</script>\n```\n\n## Complete Example\n\n```vue\n<!-- App.vue -->\n<script setup lang=\"ts\">\nimport { useInit, useEncrypt, useDecrypt, useStatus } from '@fhevm/vue';\nimport { BrowserProvider } from 'ethers';\nimport { onMounted } from 'vue';\n\nconst { init } = useInit();\nconst { isReady, isLoading, isError } = useStatus();\nconst { encrypt, data: encryptedData, isLoading: isEncrypting } = useEncrypt();\nconst { decrypt, data: decryptedData, isLoading: isDecrypting } = useDecrypt();\n\nonMounted(async () => {\n  const provider = new BrowserProvider(window.ethereum);\n  await init({ provider });\n});\n\nconst handleEncrypt = async () => {\n  await encrypt({\n    value: 42,\n    type: 'euint32',\n    contractAddress: '0x...',\n    userAddress: '0x...',\n  });\n};\n\nconst handleDecrypt = async () => {\n  const provider = new BrowserProvider(window.ethereum);\n  const signer = await provider.getSigner();\n\n  await decrypt(\n    [{ handle: '0x...', contractAddress: '0x...' }],\n    signer\n  );\n};\n</script>\n\n<template>\n  <div class=\"app\">\n    <h1>FHEVM Demo</h1>\n\n    <div v-if=\"isLoading\">Loading FHEVM...</div>\n    <div v-else-if=\"isError\">Failed to initialize FHEVM</div>\n    <div v-else-if=\"!isReady\">Please connect wallet</div>\n\n    <div v-else>\n      <!-- Encrypt Section -->\n      <section>\n        <h2>Encrypt</h2>\n        <button @click=\"handleEncrypt\" :disabled=\"isEncrypting\">\n          {{ isEncrypting ? 'Encrypting...' : 'Encrypt Value' }}\n        </button>\n        <pre v-if=\"encryptedData\">{{ encryptedData }}</pre>\n      </section>\n\n      <!-- Decrypt Section -->\n      <section>\n        <h2>Decrypt</h2>\n        <button @click=\"handleDecrypt\" :disabled=\"isDecrypting\">\n          {{ isDecrypting ? 'Decrypting...' : 'Decrypt Value' }}\n        </button>\n        <pre v-if=\"decryptedData\">{{ decryptedData }}</pre>\n      </section>\n    </div>\n  </div>\n</template>\n```\n\n```ts\n// main.ts\nimport { createApp } from 'vue';\nimport { createFhevm, IndexedDBStorage } from '@fhevm/vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\n\nconst fhevm = createFhevm({\n  config: { storage: new IndexedDBStorage() }\n});\n\napp.use(fhevm);\napp.mount('#app');\n```\n\n## TypeScript Support\n\nFull TypeScript support with comprehensive type definitions.\n\n```ts\nimport type {\n  FhevmConfig,\n  FhevmStatus,\n  InitParams,\n  EncryptParams,\n  EncryptResult,\n  DecryptRequest,\n  DecryptResult,\n} from '@fhevm/vue';\n```\n\n## Composition API Only\n\nThis package supports **Vue 3 Composition API only**. Options API is not supported.\n\n## License\n\nBSD-3-Clause-Clear\n\n## Links\n\n- [FHEVM Documentation](https://docs.zama.ai/fhevm)\n- [@fhevm/core](../core)\n- [@fhevm/react](../react)\n- [GitHub Repository](https://github.com/zama-ai/fhevm-sdk)\n- [Zama](https://zama.ai)\n","readmeFilename":"README.md"}