vue-driver.js

VueDriver is a Vue plugin for driver.js, a tool to help drive the users focus

Installation

> npm install vue-driver.js

Use

javascript

import Vue from "vue";

import VueDriver from "vue-driver.js";



Vue.use(VueDriver);



// The rest of your Vue code

...





Directives



$3



Adds

v-driver-step

 directive



it accepts an object that is structured like this:

javascript

{

  popover: {

    title: String,

    description: String,

    position: String,

    showButtons: Boolean,

    closeBtnText: String,

    nextBtnText: String,

    prevBtnText: String

  },

  index: Number,

  onclick: Boolean

}



where the object types represent the type of the parameter





Note: if you specify the same index more than one step, it will choose whichever one binds last to have that position



#### Example



Without value

html



  Hi, I'm some content!





With value

html



  Hi, I'm some content!





Mixins



vue-driver has two mixins as of now



$3

$startTour is a component mixin that starts a tour, if you've supplied steps through the v-driver-step

 attribute.



Note: You must stop event propigation on your button's click event. See here for an example



#### Example



Bad

html



Good

html





$3



The

$driver` mixin exposes the current driver instance, so that you can use the driver.js api directly till i can write more useful mixins.