kingflamez/vue-mono

This is a Vue Package that helps you integrate Mono - https://withmono.com/ easily

Mono for Vue 2.x

This is a Vue Package that helps you integrate Mono - https://withmono.com/ easily"

Install

Vue

Install the npm package:

npm install --save vue-mono
# OR
yarn add vue-mono

Add the Vue plugin in your main.js and pass your connect public key:

import Vue from "vue";
import Mono from "vue-mono";

Vue.use(Mono, { publicKey: "YOUR CONNECT PUBLIC KEY" });

Nuxt

Install the npm package:

npm install --save vue-mono
# OR
yarn add vue-mono

Create a mono.js file in your plugins folder and add the Vue plugin:

// plugins/mono.js

import Vue from "vue";
import Mono from "vue-mono";

Vue.use(Mono, { publicKey: "YOUR CONNECT PUBLIC KEY" });

Go to your nuxt.config.js and add it to your plugin section

/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
............
plugins: [{src: '~/plugins/mono', ssr: false},],
...........

Usage

Mono can be launched using $launchMono() method, see example below

<template>
  <div class="btn-wrapper">
    <button type="button" @click="launchMono">Launch Mono</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 200,
    };
  },
  methods: {
    launchMono() {
      const options = {
        onSuccess: function (response) {
          alert(JSON.stringify(response));
          /**
						response : { "code": "code_xyz" }
						you can send this code back to your server to get this
						authenticated account and start making requests.
					*/
        },

        onClose: function () {
          alert("user closed the widget.");
        },
      };
      this.$launchMono(options);
    },
  },
};
</script>

Mono account-reauthorisation can be launched using $reAuthorise(options, token) method, see example below

<template>
  <div class="btn-wrapper">
    <button type="button" @click="reAuthorise">Re-Authorise Account</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 200,
    };
  },
  methods: {
    reAuthorise() {
      const options = {
        onSuccess: function (response) {
          alert(JSON.stringify(response));
          /**
						response : { "code": "code_xyz" }
					*/
        },
        onClose: function () {
          alert("user closed the widget.");
        },
      };
      const token = ""; // call the backend to fetch the re-authorisation token for the account
      this.$reAuthorise(options, token);
    },
  },
};
</script>

Please checkout Mono Documentation for more explanation.

Follow on Twitter @mrflamez_

License

This project is licensed under the MIT License - see the LICENSE.md file for details