@0xcert/vue plugin

Implementation of VueJS plug-in.

Version: 2.1.1 Updated: 03/15/2021

By: 0xcert License: MIT

Downloads Last 30 Days: 326

Install

npm i @0xcert/vue-plugin
yarn add @0xcert/vue-plugin

Repository: https://github.com/0xcert/framework

CDNs

bundle.run: https://bundle.run/@0xcert/vue-plugin

jsDelivr: https://cdn.jsdelivr.net/npm/@0xcert/vue-plugin

unpkg: https://unpkg.com/@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' } }
    }
  }
}
Categories: Vue js