{"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,"search_vec":"'1.3.2':29 '2':5 '2.7.0':18 'altern':45 'css':37 'direct':9 'driver.js':49 'global':39 'hint':26 'instal':32 'integr':15 'intro':12 'intro.js':16,34 'introj':3 'javascript':50 'manual':31 'method':13 'plugin':6 'provid':8 'provideplugin':42 'releas':28 'requir':30 'stabl':27 'step':21,23 'step-by-step':20 'tour':24,48 'use':38 'version':17 'vue':2,4,40,47 'vue-introj':1 'vue-tour':46 'webpack':44","created_at":"2026-04-25T07:40:47.893229+00:00","updated_at":"2026-04-25T07:40:47.893229+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/alex-oleshkevich/vue-introjs","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-introjs","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","communication"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}