vue-introjs

1.3.2 verified Sat Apr 25 auth: no javascript

Vue 2 plugin that provides directives and a $intro() method to integrate intro.js (version ^2.7.0) for step-by-step tours and hints. Stable release 1.3.2. Requires manual installation of intro.js and its CSS. Uses Global Vue and ProvidePlugin for webpack. Alternatives: vue-tour, driver.js.

Common errors

error introJs is not defined ↓

cause intro.js not installed or webpack ProvidePlugin not configured.

fix

Install intro.js: npm install intro.js. Add ProvidePlugin to webpack config.

error Unknown custom element: <v-intro> ↓

cause v-intro directive not registered; Vue.use(VueIntro) missing.

fix

Import VueIntro and call Vue.use(VueIntro) before mounting app.

error this.$intro is not a function ↓

cause Plugin not installed globally or used before Vue.use().

fix

Ensure Vue.use(VueIntro) is executed in main.js before component creation.

Warnings

gotcha intro.js is not bundled; must be installed separately and CSS imported manually. ↓

fix Run: npm install intro.js and import 'intro.js/introjs.css' in your app.

breaking Requires global introJs variable; webpack ProvidePlugin must map introJs to intro.js. ↓

fix Add new webpack.ProvidePlugin({ introJs: ['intro.js', 'introJs'] }) to webpack config.

deprecated Vue 2 only; no official Vue 3 support. ↓

fix Use vue3-introjs or migrate to driver.js.

gotcha $intro() returns an introJs instance, not a Vue instance. ↓

fix Call native intro.js methods like .start(), .showHints(), etc.

Install

npm install vue-introjs

yarn add vue-introjs

pnpm add vue-introjs

Imports

default
wrong
```
const VueIntro = require('vue-introjs')
```
correct
```
import VueIntro from 'vue-introjs'
```
Default import for Vue plugin. CommonJS require works but discouraged for ESM projects.
$intro
wrong
```
import { $intro } from 'vue-introjs'
```
correct
```
this.$intro() // inside Vue component
```
$intro is injected globally via Vue.use(); not a named export.
v-intro
wrong
```
<div v-intro="Tooltip text"></div>
```
correct
```
<div v-intro="'Tooltip text'"></div>
```
v-intro is a directive; value must be a string expression.

Quickstart

Shows basic setup: install plugin globally, use v-intro directive, and start tour on mount.

// main.js
import Vue from 'vue';
import VueIntro from 'vue-introjs';
Vue.use(VueIntro);

// SomeComponent.vue
<template>
  <div>
    <button v-intro="'Start tour'">Click me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    this.$intro().start();
  }
};
</script>
<style>
@import 'intro.js/introjs.css';
</style>