nuxt-monocle
v0.0.1
Published
Simple and easy Spur.us Monocle integration with Nuxt.js
Downloads
2
Readme
Spur.us Monocle
🤖 Simple and easy Spur.us Monocle integration with Nuxt.js
Setup
- Add
nuxt-monocle
dependency withyarn
ornpm
into your project - Add
nuxt-monocle
tomodules
section ofnuxt.config.js
- Configure it:
{
modules: [
[
'nuxt-monocle', {
/* Monocle options */
}
],
]
}
using top level options
{
modules: [
'nuxt-monocle',
],
monocle: {
/* Monocle options */
},
}
Configuration
{
// ...
monocle: {
token: String, // Token for requests
},
// ...
}
Runtime config
// nuxt.config.js
export default {
publicRuntimeConfig: {
monocle: {
/* Monocle options */
token: process.env.MONOCLE_TOKEN // for example
}
}
}
Generate Monocle Token
You can generate token by registering a new account.
Usage
Monocle
- Add
<monocle>
component inside your component:
<template>
<monocle />
<button @click="verifyAnonMode">Clic me</button>
</template>
- Call
getBundle
to get Monocle bundle and send it to the server:
async verifyAnonMode() {
try {
const bundle = await this.$monocle.getBundle()
console.log('Monocle bundle:', bundle)
// send bundle to server alongside your form data
// at the end you need to refresh monocle
await this.$monocle.refresh()
} catch (error) {
console.log('error:', error)
}
},
- Call
destroy
function insidebeforeDestroy
hook of the page. (This will remove Monocle scripts, styles and badge from the page)
beforeDestroy() {
this.$monocle.destroy()
}
See:
Server Side
When you send data + bundle
to the server, you should verify the bundle on the server side to make sure it does not requested from a anon network.
You can find out how to verify bundle on the server side by looking at the server controller inside example.
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) owapp [email protected]