vue-introjs

library1.3.2jsnpmunverified

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.

web-framework communication

npm install vue-introjs

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-INTROJS

vue-introjs

web-frameworkjavascriptv1.3.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import VueIntro from 'vue-introjs'

✗ const VueIntro = require('vue-introjs')

Default import for Vue plugin. CommonJS require works but discouraged for ESM projects.

$intro

✓ this.$intro() // inside Vue component

✗ import { $intro } from 'vue-introjs'

$intro is injected globally via Vue.use(); not a named export.

v-intro

✓ <div v-intro="'Tooltip text'"></div>

✗ <div v-intro="Tooltip text"></div>

v-intro is a directive; value must be a string expression.

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>

Debug

Known issues

gotchaintro.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.

affects: >=1.0.0

breakingRequires global introJs variable; webpack ProvidePlugin must map introJs to intro.js.

fix

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

affects: >=1.0.0

deprecatedVue 2 only; no official Vue 3 support.

fix

Use vue3-introjs or migrate to driver.js.

affects: >=1.0.0

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

fix

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

affects: >=1.0.0

Errors

Common errors & fixes

introJs is not defined

intro.js not installed or webpack ProvidePlugin not configured.

fix

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

Unknown custom element: <v-intro>

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

fix

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

this.$intro is not a function

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

fix

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

Upgrade

Version history

1.3.2latest on npm

Audit

Dependencies

intro.jsrequiredpeer dependency; must be installed separately for intro.js functionality and CSS

Agent activity

29 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/alex-oleshkevich/vue-introjs ↗

packagehttps://www.npmjs.com/package/vue-introjs ↗