{"id":18913,"library":"vue-introjs","title":"vue-introjs","description":"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.","status":"active","version":"1.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/alex-oleshkevich/vue-introjs","tags":["javascript"],"install":[{"cmd":"npm install vue-introjs","lang":"bash","label":"npm"},{"cmd":"yarn add vue-introjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-introjs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; must be installed separately for intro.js functionality and CSS","package":"intro.js","optional":false}],"imports":[{"note":"Default import for Vue plugin. CommonJS require works but discouraged for ESM projects.","wrong":"const VueIntro = require('vue-introjs')","symbol":"default","correct":"import VueIntro from 'vue-introjs'"},{"note":"$intro is injected globally via Vue.use(); not a named export.","wrong":"import { $intro } from 'vue-introjs'","symbol":"$intro","correct":"this.$intro() // inside Vue component"},{"note":"v-intro is a directive; value must be a string expression.","wrong":"<div v-intro=\"Tooltip text\"></div>","symbol":"v-intro","correct":"<div v-intro=\"'Tooltip text'\"></div>"}],"quickstart":{"code":"// main.js\nimport Vue from 'vue';\nimport VueIntro from 'vue-introjs';\nVue.use(VueIntro);\n\n// SomeComponent.vue\n<template>\n  <div>\n    <button v-intro=\"'Start tour'\">Click me</button>\n  </div>\n</template>\n<script>\nexport default {\n  mounted() {\n    this.$intro().start();\n  }\n};\n</script>\n<style>\n@import 'intro.js/introjs.css';\n</style>","lang":"javascript","description":"Shows basic setup: install plugin globally, use v-intro directive, and start tour on mount."},"warnings":[{"fix":"Run: npm install intro.js and import 'intro.js/introjs.css' in your app.","message":"intro.js is not bundled; must be installed separately and CSS imported manually.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add new webpack.ProvidePlugin({ introJs: ['intro.js', 'introJs'] }) to webpack config.","message":"Requires global introJs variable; webpack ProvidePlugin must map introJs to intro.js.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use vue3-introjs or migrate to driver.js.","message":"Vue 2 only; no official Vue 3 support.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Call native intro.js methods like .start(), .showHints(), etc.","message":"$intro() returns an introJs instance, not a Vue instance.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install intro.js: npm install intro.js. Add ProvidePlugin to webpack config.","cause":"intro.js not installed or webpack ProvidePlugin not configured.","error":"introJs is not defined"},{"fix":"Import VueIntro and call Vue.use(VueIntro) before mounting app.","cause":"v-intro directive not registered; Vue.use(VueIntro) missing.","error":"Unknown custom element: <v-intro>"},{"fix":"Ensure Vue.use(VueIntro) is executed in main.js before component creation.","cause":"Plugin not installed globally or used before Vue.use().","error":"this.$intro is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}