@0xcert/vue-plugin

Implementation of Vue.js plug-in.

The 0xcert Framework is a free and open-source JavaScript library that provides tools for building powerful decentralized applications. Please refer to the official documentation for more details.

This module is one of the bricks of the 0xcert Framework. It's written with TypeScript and it's actively maintained. The source code is available on GitHub where you can also find our issue tracker.

Installation

Create a new file ./plugins/0xcert.js with the code below.

import Vue from 'vue'
import { Vue0xcert } from '@0xcert/vue-plugin'
import { MetamaskProvider } from '@0xcert/ethereum-metamask-provider'
import { Cert } from '@0xcert/cert'
import { AssetLedger } from '@0xcert/ethereum-asset-ledger'
import { ValueLedger } from '@0xcert/ethereum-value-ledger'
import { Gateway } from '@0xcert/ethereum-gateway'

Vue.use(Vue0xcert, {
  provider: new MetamaskProvider({
    actionsGatewayId: '0xf382cfa46f01d9b401d62432ad3797ee190cc97f',
  }),
  modules: [
    { name: 'Cert', object: Cert },
    { name: 'AssetLedger', object: AssetLedger },
    { name: 'ValueLedger', object: ValueLedger },
    { name: 'Gateway', object: Gateway },
  ],
})

Register the plugin inside the nuxt.config.js file.

export default {
  plugins: [
    { src: '~/plugins/0xcert', ssr: false },
  ],
}

The plugin gives you access to the 0xcert Vue.js client.

const client = this.$0xcert; // 0xcert client
const provider = this.$0xcert.provider; // current provider

Vue.js and Nuxt.js use Webpack for compiling modules. Webpack can sometimes render the source code in a strange way, ignoring code conditions, thus you may encounter the "missing module" error. The fix for this is to set node.{module-name} = 'empty' property in the webpack configuration. The example below shows how you should do this in Nuxt.js:

export default {
  build: {
    ...
    extend (config, ctx) {
      ...
      if (ctx.isClient) { config.node = { fs: 'empty' } }
    }
  }
}