Nop Docs

# Vue

Nop has a first-party support for Vue and Vue router.
Currently only Vue2 is supported.

# Installation

npm install @nop-app/vue-nop@^2

or

yarn add @nop-app/vue-nop@^2

# Usage

TIP

You can see a working demo repository on GitHub (opens new window).

Include and use VueNop inside your main file. In order to let it work, you must provide the router instance too.

import Vue from 'vue'
import VueNop from '@nop-app/vue-nop'

// Your router defined somewhere else
import router from './router'

Vue.use(VueNop, {
  router,
  enabledRoutes: [
    // Your routes here
  ],
  settings: {
    token: 'TOKEN_HERE',
    // ... Other settings
  }
})

Note that the plugin will inject a $nop variable inside your Vue instance, therefore your can access it anytime with this.$nop.

# Settings

# router

Type: VueRouter
Default: null

The VueRouter instance. Required to let the plugin work properly.

# enabledRoutes

Type: Array
Default: []

The list of enabled routes where the plugin should be loaded. It can be a list of route names (opens new window), regular expressions or absolute paths (opens new window).

Vue.use(VueNop, {
  enabledRoutes: [
    // RegExp
    '/posts/[0-9]+',

    // Absolute path
    '/posts/123',

    // Route name
    'edit-post',
  ],
})

# settings

Type: Object
Default: {}

The Nop settings, where you define your token and other cool properties. Discover the available settings here.

# Methods

# setUser(name: String): void

Set the current user name.

this.$nop.setUser('Laura Palmer')

# mergeSettings(settings: Object): void

Merge the given settings for the Nop instance.

/*
Current settings: {
  user: 'Laura',
  enabled: true,
  redirectOnApprove: '/',
}
*/

this.$nop.mergeSettings({
  redirectOnApprove: '/bye',
})

/*
New settings: {
  user: 'Laura',
  enabled: true,
  redirectOnApprove: '/bye',
}
*/

← Nuxt →