VueWeb3 
Vue.js bindings for Web3 1.0
Installation
In module environments, e.g CommonJS:
npm install vue [email protected] vue-web3
var Vue = require('vue')
var Web3 = require('web3')
var VueWeb3 = require('vue-web3')
// explicit installation required in module environments
Vue.use(VueWeb3, { web3: new Web3(web3.currentProvider) })
Usage
let myContract = new web3.eth.Contract(MyContract, '0xbA911C4A817e69998Ffd3626d3c5366038e8480F')
var vm = new Vue({
el: '#demo',
web3: {
// can bind to calls
lastUpdated: {
contract: myContract,
method: 'getLastUpdated',
arguments: []
},
// can also bind to events
transfers: {
contract: myContract,
event: 'OwnershipTransferred',
options: {
fromBlock: 2
}
}
}
})
If you need to access properties from the Vue instance, use the function syntax:
var vm = new Vue({
el: '#demo',
web3: function () {
return {
lastUpdated: {
contract: myContract,
method: 'getLastUpdated',
arguments: [this.$store.state.user.uid]
}
}
}
})
$watch and call $unbind and then $bindCall or $bindEvents
<div id="demo">
<pre>{{ lastUpdated }}</pre>
<ul>
<li v-for="transfer in transfers">From {{ transfer.previousOwner }} to {{ transfer.newOwner }}</li>
</ul>
</div>
The above will bind the Vue instance's lastUpdated and transfers to the respective Web3 data sources.
Alternatively, you can also manually bind to Web3 with the $bindCall or $bindEvents instance methods:
let myContract = new web3.eth.Contract(MyContract, '0xbA911C4A817e69998Ffd3626d3c5366038e8480F')
vm.$bindCall('user', { contract: myContract, method: 'getUser' })
vm.$bindEvents('transfers', { contract: myContract, event: 'OwnershipTransferred' })
// References are unbound when the component is destroyed but you can manually unbind a reference
// if needed
vm.$unbind('items')
Error: The current provider doesn't support subscriptions: MetamaskInpageProvider
In 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.
Thankfully, we can create our own provider:
var provider = new Web3.providers.WebsocketProvider('wss://ropsten.infura.io/ws')
Until 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.
Contributing
Clone the repo, then:
$ npm install # install dependencies
$ npm test # run test suite with coverage report
$ npm run dev # watch and build dist/vue-web3.js
$ npm run build # build dist/vue-web3.js and vue-web3.min.js
74 Apr 2, 2022
4 May 3, 2020
1.3k Dec 29, 2022
274 Oct 22, 2022
26 Feb 26, 2021
14 Nov 18, 2021
4 Sep 28, 2022
133 Aug 20, 2022
1.9k Dec 29, 2022
299 Dec 12, 2022
81 Jun 29, 2022
16 Dec 1, 2018
146 Feb 25, 2022
52 Nov 18, 2021
19 Nov 24, 2022
252 Dec 30, 2022
419 Dec 30, 2022
448 Nov 24, 2022
25 Dec 19, 2022