vue-ethereum v0.3.7
vue-ethereum
Vue and Nuxt plugins for easy access to Ethereum (using web3.js 1.x) (Vuex not needed)
Installation
Install via yarn
yarn add vue-ethereum
or npm
npm i vue-ethereum
Vue plugin usage
import VueEthereum from 'vue-ethereum'
Vue.use(VueEthereum)
new Vue({
// your vue config
eth: new VueEthereum(),
})
Nuxt plugin usage
Add vue-ethereum/nuxt
to modules section of nuxt.config.js
{
modules: [ 'vue-ethereum/nuxt' ]
}
Global Helpers
vue-ethereum provides high level helpers to use in your templates. All features can be obtained from $eth property in Vue components.
For example in a vue file:
<p v-if="$eth.isConnected">
Connected to {{ $eth.networkName }}
</p>
export default {
mounted () {
this.$eth.connect();
}
}
.on('connected, <fn>)
.on('networkChanged, <fn>)
.on('accountsChanged', <fn>)
Define callback functions that will be executed respectively after a connection, a network change and an account change.
.connect()
Connect vue to the current window provider.
.disconnect()
Disconnect vue to the current window provider.
.explorer(<type>,<argument>)
Return an Url to the current network explorer depending on the first argument:
- with type='address': the address page corresponding to the address
- with type='tx': the transaction page corresponding to the tx
Urls created using .explorer are automatically updated when the network is changed.
.balance(<address>)
Return the balance in Ether (automatically updated when network or account is changed).
.walletDetected
Return true if a wallet has been detected.
.walletType
Return a description string of the current wallet detected (if possible). Example: 'MetaMask (or compatible)'
.isConnected
Return true if a wallet has been detected.
.selectedAddress
Return the current address selected in the connected wallet.
.accounts
Return an Array of all current accounts in the connected wallet (if possible). 'selectedAddress' is always included in this array.
.networkId
Return the Id of the current network (automatically updated when network is changed).
.networkName
Return a description string of the network detected (automatically updated when network is changed). Example: 'Ropsten'.
.isTestNetwork
Return true if the current network is a test network (automatically updated when network is changed).
.web3
Get a web3.js Javascript instance with the current connected provider. Please check web3.js (1.x) documentation to use this handler.
.error
Return the last error string from RPC connection.
work in progress for beta version, please see example in examples/vue-example
.
Examples
Use npm run dev-vue
to run a simple example locally.