All Projects → morrislaptop → vue-web3

morrislaptop / vue-web3

Licence: MIT license
🐙 Web3 blockchain bindings for Vue.js (inspired by Vuefire and Drizzle)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to vue-web3

ethereum-dapp-ipfs-node.js-mongodb
以太坊开发DApp实战教程——用区块链、星际文件系统(IPFS)、Node.js和MongoDB来构建电商平台
Stars: ✭ 46 (-26.98%)
Mutual labels:  dapp, ethereum-contract, ethereum-dapp, ethereum-blockchain
Eth Vue
Featured in Awesome Vue [https://github.com/vuejs/awesome-vue], a curated list maintained by vuejs of awesome things related to the Vue.js framework, and Awesome List [https://awesomelists.net/150-Vue.js/3863-Open+Source/18749-DOkwufulueze-eth-vue], this Truffle Box provides everything you need to quickly build Ethereum dApps that have authentication features with vue, including configuration for easy deployment to the Ropsten Network. It's also Gravatar-enabled. Connecting to a running Ganache blockchain network from Truffle is also possible -- for fast development and testing purposes. Built on Truffle 5 and Vue 3, eth-vue uses vuex for state management, vuex-persist for local storage of app state, and vue-router for routing. Authentication functionalities are handled by Smart Contracts running on the Ethereum blockchain.
Stars: ✭ 171 (+171.43%)
Mutual labels:  dapp, ethereum-contract, web3, ethereum-dapp
Trust Wallet Ios
📱 Trust - Ethereum Wallet and Web3 DApp Browser for iOS
Stars: ✭ 1,228 (+1849.21%)
Mutual labels:  dapp, ethereum-contract, web3, ethereum-dapp
React Ethereum Dapp Example
A starter boilerplate for an Ethereum dapp using web3.js v1.0, truffle, react, and parity
Stars: ✭ 384 (+509.52%)
Mutual labels:  ethereum-contract, web3, ethereum-dapp, ethereum-blockchain
cheezyverse
Cheeze Wizards is the world's first battle royale on the blockchain (with cheese!)
Stars: ✭ 38 (-39.68%)
Mutual labels:  dapp, ethereum-contract, ethereum-dapp
NFT-Dapp-Boilerplate
A highly scalable NFT and DEFI boilerplate with pre added web3 and different wallets with a focus on performance and best practices
Stars: ✭ 51 (-19.05%)
Mutual labels:  dapp, web3, ethereum-dapp
contracts
Contracts for FundRequest (platform, token, crowdsale)
Stars: ✭ 56 (-11.11%)
Mutual labels:  dapp, ethereum-contract, ethereum-dapp
Augur
Augur - Prediction Market Protocol and Client
Stars: ✭ 294 (+366.67%)
Mutual labels:  dapp, ethereum-contract, ethereum-dapp
ProveIt
Implements proof of historical data possession on the Ethereum blockchain
Stars: ✭ 37 (-41.27%)
Mutual labels:  ethereum-contract, web3, ethereum-dapp
web3
⚡️ Web3 PHP is a supercharged PHP API client that allows you to interact with a generic Ethereum RPC.
Stars: ✭ 609 (+866.67%)
Mutual labels:  dapp, web3, eth
Eth Crypto
Cryptographic javascript-functions for ethereum and tutorials to use them with web3js and solidity
Stars: ✭ 420 (+566.67%)
Mutual labels:  dapp, web3, eth
Angular Truffle Starter Dapp
Angular CLI + Truffle Starter Dapp; write, compile & deploy smart contracts on Ethereum blockchains
Stars: ✭ 174 (+176.19%)
Mutual labels:  dapp, ethereum-contract, ethereum-dapp
Seriality
Seriality is a library for serializing and de-serializing all the Solidity types in a very efficient way which mostly written in solidity-assembly
Stars: ✭ 105 (+66.67%)
Mutual labels:  ethereum-contract, ethereum-dapp, ethereum-blockchain
defiprime
All things #DeFi - trustless and transparent financial products built on top of the blockchain.
Stars: ✭ 117 (+85.71%)
Mutual labels:  ethereum-contract, ethereum-dapp, ethereum-blockchain
web3jdemo
功能强大的web3j以太坊用例,支持批量生成钱包,批量不同账户转账,查询余额等,监控,定时任务,交易mint等方法,持续更新中... ...
Stars: ✭ 262 (+315.87%)
Mutual labels:  ethereum-contract, web3, eth
HealthCare-Insurance-Ethereum
Medical insurance claiming DApp which uses a Multi-Sig type approach to grant claim (ConsenSys project)
Stars: ✭ 65 (+3.17%)
Mutual labels:  dapp, ethereum-contract, ethereum-dapp
ehr-blockchain
Electronic Health Record (EHR) and Electronic Medical Record (EMR) systems. However, they still face some issues regarding the security of medical records, user ownership of data, data integrity etc. The solution to these issues could be the use of a novel technology, i.e., Blockchain. This technology offers to provide a secure, temper-proof pl…
Stars: ✭ 41 (-34.92%)
Mutual labels:  ethereum-contract, ethereum-dapp, ethereum-blockchain
Disperse
React/Redux dApp (decentralized app) boilerplate using Ethereum's blockchain
Stars: ✭ 36 (-42.86%)
Mutual labels:  dapp, ethereum-dapp, ethereum-blockchain
Golden Wallet React Native
Golden - Best Wallet Ever
Stars: ✭ 201 (+219.05%)
Mutual labels:  dapp, web3, ethereum-dapp
zksync-dapp-checkout
zkCheckout — trustable permissionless DeFi payment gateway. Brand new zkSync dApp w/t all L2 perks: fast&cheap transfers / simple&quick withdrawal
Stars: ✭ 37 (-41.27%)
Mutual labels:  dapp, web3, ethereum-dapp

VueWeb3 Build Status npm package

Vue.js bindings for Web3 1.0

Installation

In module environments, e.g CommonJS:

npm install vue web3@beta 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]
      }
    }
  }
})

⚠️: 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

<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

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].