{"id":18701776,"url":"https://github.com/morrislaptop/vue-web3","last_synced_at":"2026-03-16T16:02:46.819Z","repository":{"id":57396753,"uuid":"123678837","full_name":"morrislaptop/vue-web3","owner":"morrislaptop","description":"🐙 Web3 blockchain bindings for Vue.js (inspired by Vuefire and Drizzle)","archived":false,"fork":false,"pushed_at":"2018-08-28T09:11:39.000Z","size":180,"stargazers_count":63,"open_issues_count":1,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-10T02:09:10.441Z","etag":null,"topics":["dapp","eth","ethereum","ethereum-blockchain","ethereum-contract","ethereum-dapp","vue","web3"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-web3","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/morrislaptop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-03T09:42:52.000Z","updated_at":"2023-06-16T15:54:03.000Z","dependencies_parsed_at":"2022-09-06T11:52:08.071Z","dependency_job_id":null,"html_url":"https://github.com/morrislaptop/vue-web3","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morrislaptop%2Fvue-web3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morrislaptop%2Fvue-web3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morrislaptop%2Fvue-web3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morrislaptop%2Fvue-web3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morrislaptop","download_url":"https://codeload.github.com/morrislaptop/vue-web3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248540157,"owners_count":21121308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dapp","eth","ethereum","ethereum-blockchain","ethereum-contract","ethereum-dapp","vue","web3"],"created_at":"2024-11-07T11:42:30.807Z","updated_at":"2026-03-16T16:02:41.772Z","avatar_url":"https://github.com/morrislaptop.png","language":"JavaScript","funding_links":[],"categories":["积分","Components \u0026 Libraries","Integrations [🔝](#readme)","Integrations"],"sub_categories":["付款","Integrations","Payment"],"readme":"# VueWeb3 [![Build Status](https://img.shields.io/circleci/project/morrislaptop/vue-web3.svg)](https://circleci.com/gh/morrislaptop/vue-web3) [![npm package](https://img.shields.io/npm/v/vue-web3.svg)](https://www.npmjs.com/package/vue-web3)\n\n\u003e Vue.js bindings for Web3 1.0\n\n## Installation\n\nIn module environments, e.g CommonJS:\n\n  ``` bash\n  npm install vue web3@beta vue-web3\n  ```\n\n  ``` js\n  var Vue = require('vue')\n  var Web3 = require('web3')\n  var VueWeb3 = require('vue-web3')\n\n  // explicit installation required in module environments\n  Vue.use(VueWeb3, { web3: new Web3(web3.currentProvider) })\n  ```\n\n## Usage\n\n``` js\nlet myContract = new web3.eth.Contract(MyContract, '0xbA911C4A817e69998Ffd3626d3c5366038e8480F')\n\nvar vm = new Vue({\n  el: '#demo',\n  web3: {\n    // can bind to calls\n    lastUpdated: {\n      contract: myContract,\n      method: 'getLastUpdated',\n      arguments: []\n    },\n    // can also bind to events\n    transfers: {\n      contract: myContract,\n      event: 'OwnershipTransferred',\n      options: {\n        fromBlock: 2\n      }\n    }\n  }\n})\n```\n\nIf you need to access properties from the Vue instance, use the function syntax:\n\n```js\nvar vm = new Vue({\n  el: '#demo',\n  web3: function () {\n    return {\n      lastUpdated: {\n        contract: myContract,\n        method: 'getLastUpdated',\n        arguments: [this.$store.state.user.uid]\n      }\n    }\n  }\n})\n```\n\n⚠️: This function will get executed only once. If you want to have automatic rebind (pretty much like a computed property) use a `$watch` and call `$unbind` and then `$bindCall` or `$bindEvents`\n\n``` html\n\u003cdiv id=\"demo\"\u003e\n  \u003cpre\u003e{{ lastUpdated }}\u003c/pre\u003e\n  \u003cul\u003e\n    \u003cli v-for=\"transfer in transfers\"\u003eFrom {{ transfer.previousOwner }} to {{ transfer.newOwner }}\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\nThe above will bind the Vue instance's `lastUpdated` and `transfers` to the respective Web3 data sources.\n\nAlternatively, you can also manually bind to Web3 with the `$bindCall` or `$bindEvents` instance methods:\n\n``` js\nlet myContract = new web3.eth.Contract(MyContract, '0xbA911C4A817e69998Ffd3626d3c5366038e8480F')\nvm.$bindCall('user', { contract: myContract, method: 'getUser' })\nvm.$bindEvents('transfers', { contract: myContract, event: 'OwnershipTransferred' })\n\n// References are unbound when the component is destroyed but you can manually unbind a reference\n// if needed\nvm.$unbind('items')\n```\n\n## Error: The current provider doesn't support subscriptions: MetamaskInpageProvider\n\nIn order to get updates from the blockchain, this library requires a provider that supports `subscriptions`. MetaMask does not currently inject a provider with this support, this is being tracked via metamask-extension/2350.\n\nThankfully, we can [create our own provider](https://github.com/INFURA/infura/issues/29#issuecomment-358716498]):\n\n``` js\nvar provider = new Web3.providers.WebsocketProvider('wss://ropsten.infura.io/ws')\n```\n\nUntil MetaMask's provider supports subscriptions, you can have a `write` web3 instance with MetaMask's provider and a `read` web3 instance which uses the WebsocketProvider. \n\n## Contributing\n\nClone the repo, then:\n\n```bash\n$ npm install    # install dependencies\n$ npm test       # run test suite with coverage report\n$ npm run dev    # watch and build dist/vue-web3.js\n$ npm run build  # build dist/vue-web3.js and vue-web3.min.js\n```\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorrislaptop%2Fvue-web3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorrislaptop%2Fvue-web3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorrislaptop%2Fvue-web3/lists"}