vue-introjs

intro.js bindings for Vue.

Installation

$3

bash
yarn add vue-introjs
or via npm:

npm i vue-introjs

$3

javascript
import VueIntro from 'vue-introjs';
Vue.use(VueIntro);

#### Use CDN version of introJs Make sure you have installed and attachedintro.jsscripts and styles to the page. This plugin does not come with intro.js built-in.

The motivation of it is to give the developer more control on intro.js versions.

#### Use with webpack Install required dependency:`bash yarn add intro.js`

As this plugin relies on global introJsvariable, webpack's should provide it:`javascript // webpack.config.js { plugins: [ new webpack.ProvidePlugin({ // other modules introJs: ['intro.js', 'introJs'] }) ] }

// attach CSS // SomeComponent.vue import 'intro.js/introjs.css';`

#### Use with vue-cli and webpack template Add to yoursrc/main.jssomething like this for global, or per SFC like above:`javascript import VueIntro from 'vue-introjs' Vue.use(VueIntro)

import 'intro.js/introjs.css';`then add into theplugins sections of build/webpack.dev.conf.js and build/webpack.prod.conf.js the new webpack.ProvidePlugin({ section from above.

Don't forget to install intro.js though and save it (via yarn or npm). The webpack.ProvidePlugin will pull it in, so no need to import introJs from 'intro.js' in src/main.js

`Contents`


The plugin extends Vue with a set of directives and

$intro()

 constructor function.

Define steps and hints

Directives, to define introductional steps:
$3

`html The tooltip text of step.

`html Optionally define the number (priority) of step.

`html Optionally define a CSS class for tooltip.

`html Optionally append a CSS class to the helperLayer.

`html Optionally define the position of tooltip,top, left, right, bottom, bottom-left-aligned (same as bottom), bottom-middle-aligned, bottom-right-aligned or auto (to detect the position of element and assign the correct position automatically). Default is bottom.

`html Optionally define the element to scroll to,element or tooltip. Default is element.

`html To disable interactions with elements inside the highlighted box,true or false (also 1 or 0).


More about intro steps
$3

Directives, to define hints:

`html The tooltip text of hint.

`html Optionally define the position of hint. Options:top-middle, top-left, top-right, bottom-left, bottom-right, bottom-middle, middle-left, middle-right, middle-middle. Default: top-middle.


More about hints

Also refer example directory for live examples.

`Usage`


Once all steps are defined, call

start() or showHints()

 to start the show:

javascript
// SomeComponent.vue
{
    mounted() {
        this.$intro().start(); // start the guide
        this.$intro().showHints(); // show hints
    }
}


Configuration

When the defaults are not enough, then fine tuning is required.
Construct a new

introJs

 instance and configure in own way:

javascript
this.$intro('#intro-farm'); // //start introduction for element id='intro-farm'
this.$intro().addStep({}); // Add a new step to introJs programmatically.

Basically, $intro() returns a new introJs instance which then can be configured usign it's API.

`Registering callbacks`


Just call

this.$intro().

. Example:

javascript
// SomeComponent
this.$intro().oncomplete(function () {
    console.log('completed');
});


Autostart

If tour should start automatically when all directives loaded,
add

v-intro-autostart="true"

 directive.
Also extra configuration required for plugin:

javascript
import VueIntro from 'intro.js';
Vue.use(VueIntro, {
    waitTimeout: 400
});

For hints use v-intro-autostart:hints="true".

`$3`


The plugin starts a timer with

waitTimeout

.
Every

v-intro

 directive restarts that timer. This lets the plugin to wait for async components, router views or other components to load before tour will be autostarted.
$3

Add

v-intro-autostart.config next to v-intro-autostart

 with intro.js configuration object as an argument.
That object then passed to

introJs(obj)

 constructor.

html


$3

It is possible to add event listeners to automatically started tour.
The format is:


v-intro-autostart:on.=""


where

event-name

 is any of intro.js supported hooks (see intro.js hooks) for more details.
Same applies to hints.

Note, the plugin defines two more events, designed to work with the autostart feature:onautostart and onautostarthints. These callbacks receive two arguments: element and current introjs instance.

For example:`html


Conditional steps and hints

When it is required to bind intro only when some expression evaluates to

true

,
use

v-intro-if

 directive.
It accepts any valid expression that evaluates to either

true or false

html

Note, that v-intro-if directive must go after v-intro`.

Credits

1. http://introjs.com
2. Gabriel J Perez Irizarry