vue-mono

This is a Vue Package that helps you integrate Mono - https://withmono.com/ easily
1,287 11
Install
npm install vue-mono
Latest Version:1.1.0
Vue:2
License:MIT
Last Updated:Dec 5, 2024
Links: GitHub  ·  npm
Maintainer: kingflamez

Mono for Vue 2.x

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

NPM JavaScript Style Guide

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>

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

Related Packages

vue-flutterwave

This is a Vue Package that helps you integrate Flutterwave - https://flutterwave...

2,197 6
flutterwave-vue-v3

Flutterwave official Vue library to accept payment via Card , USSD, QrCode etc.

2,739 8
@sail-team/balance-checker

Universal web components for balance display and onboarding flow - works with An...

2,811
@edusites/icons

Biblioteca JavaScript com 1588 ícones SVG em português (bancos, fintechs, 160+ m...

8,317 7
riyal

The Saudi Riyal currency symbol (U+20C1) as a web font, CSS utility, React, Vue...

5,427 3

Version History

Version Released Vue License
1.1.0 ^2.6.7 MIT
1.0.2 ^2.6.7 MIT
1.0.1 ^2.6.7 MIT
1.0.0 ^2.6.7 MIT