Skip to content
Connect Vue to Drizzle
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Merge pull request #9 from jklepatch/remove-redundant-initialization-… Jun 12, 2019

Vue Plugin

Note: This is still a work in progres

$ npm install drizzle-vue-plugin

drizzle-vue-plugin adapts Drizzle for Vue development.

Getting Started

  1. Configure drizzle by defining a module. The following example lets drizzle know the web3 connection options, the contracts and contract events to monitor. It also specifies polling for account change every 15 seconds. This is useful to not be overwhelmed with polling messages while focusing on UI development.

    // drizzleOptions.js
    import SimpleStorage from './contracts/SimpleStorage.json'
    import ComplexStorage from './contracts/ComplexStorage.json'
    import TutorialToken from './contracts/TutorialToken.json'
    const options = {
      web3: {
        block: false,
        fallback: {
          type: 'ws',
          url: 'ws://'
      // The contracts to monitor
      contracts: [SimpleStorage,ComplexStorage, TutorialToken],
      events: {
        // monitor SimpleStorage.StorageSet events
        SimpleStorage: ['StorageSet']
      polls: {
        // check accounts ever 15 seconds
        accounts: 15000
    export default options
  2. Register the drizzleVuePlugin with your Vuex Store and continue as normal with Vuex Store registration to main/root Vue instance.

    // main.js
    import Vue from 'vue'
    import App from './App.vue'
    import Vuex from 'vuex'
    import drizzleVuePlugin from 'TODO: TBD name of package'
    import drizzleOptions from './drizzleOptions'
    // Register Vuex
    // Create and configure your Vuex Store
    const store = new Vuex.Store({ state: {} })
    // Register the drizzleVuePlugin
    Vue.use(drizzleVuePlugin, { store, drizzleOptions })
    // Register the store instance with the Root Vue instance
    new Vue({
     render: h => h(App)
  3. The Vuex store will have access to 3 sub-branches of State that can be accessed with Vuex's mapGetters helper.

    • account - getAccount() - returns the current active web3 accounts.

    • contracts - getContractData({contract, method, toUtf8, toAscii}) - retrieve the smart contract state specified by contract.method and convert toUtf, or toAscii if specified.

    • drizzle - has 2 useful methods.

      1. isDrizzleInitialized() - true when drizzle is ready.
      2. drizzleInstance() - access the drizzleInstance, which may be necessary for interracting with drizzle directly, or even to access the web3 provider.
  4. You can now access 3 base components that you can use to build more sophisticated interfaces.

    • drizzle-account - render the current account and associated balance.
    • drizzle-contract - render a specific contract method.
    • drizzle-contract-form render an input for a specific contract method
  5. For more information take a look at the Test Vue Dapp

You can’t perform that action at this time.