Wondering what’s next for npm?Check out our public roadmap! »

    @0xcert/vue-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    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' } }
        }
      }
    }

    Install

    npm i @0xcert/vue-plugin

    DownloadsWeekly Downloads

    90

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    51.9 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar
    • avatar