Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.

Related tags

javascript vue tour
Overview

Vue Tour

CircleCI

Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.

Vue Tour

Table of Contents

Getting Started

You can install vue-tour using npm or by downloading the minified build on GitHub.

npm install vue-tour

Then import the plugin in your application entry point (typically main.js if you used vue-cli to scaffold your project) and tell Vue to use it. Also don't forget to include the styles. You can add the styles provided by default or customize them to your own liking.

import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
  render: h => h(App)
}).$mount('#app')

Finally put a v-tour component in your template anywhere in your app (usually in App.vue) and pass it an array of steps. The target property of each step can target a DOM element in any component of your app (as long as it exists in the DOM when the concerned step pops up).

<template>
  <div>
    <div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
    <div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
    <div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>

    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

<script>
  export default {
    name: 'my-tour',
    data () {
      return {
        steps: [
          {
            target: '#v-step-0',  // We're using document.querySelector() under the hood
            header: {
              title: 'Get Started',
            },
            content: `Discover <strong>Vue Tour</strong>!`
          },
          {
            target: '.v-step-1',
            content: 'An awesome plugin made with Vue.js!'
          },
          {
            target: '[data-v-step="2"]',
            content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
            params: {
              placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
            }
          }
        ]
      }
    },
    mounted: function () {
      this.$tours['myTour'].start()
    }
  }
</script>

For all individual elements you want to add a step on, make sure it can be retrieved with document.querySelector(). You can use any selector, an ID, a CSS class, data attributes, etc. Once this is done and your steps correctly target some DOM elements of your application, you can start the tour by calling the following method.

this.$tours['myTour'].start()

For a more detailed documentation, checkout the docs for vue-tour.

before() UI step functions

If you need to do UI setup work before a step, there's a before function you may include in any/each of your steps. This function will get invoked before the start/next/previous step is rendered. The function must return a promise. The function is invoked when start, nextStep, and previousStep are triggered. When the promise is rejected, it will not move to the next or previous step. If the promise is resolved then it will move in the direction specified.

It's used when you need to change what's shown on the screen between steps. For example, you may want to hide one set of menus and open a screen or you want to perform an async operation. This is especially useful in single-page applications.

steps: [
  {
    target: '#v-step-0',  // We're using document.querySelector() under the hood
    content: `Discover <strong>Vue Tour</strong>!`,
    before: type => new Promise((resolve, reject) => {
      // Time-consuming UI/async operation here
      resolve('foo')
    })
  }
]

Something Missing?

If you have a feature request or found a bug, let us know by submitting an issue.

Issues
  • Handling targets in corners

    Handling targets in corners

    I ran into an issue while attempting to target elements at corners. The .v-step__arrow seems to always be in the middle of the tour step which, in turn, ends up pointing away from the actual target.

    Here's a pen describing the issue. The example has 3 tour steps, the third of which highlights a different issue (the whole screen moves to accomodate the step and it doesn't move back), but I suspect this might just be an issue on my machine.

    In short, this could probably be solved with placement values of top-left, top-right and so on. I strongly feel that this is something that's absolutely necessary for mobile since things tend to get pushed to corners a lot on small screens.

    enhancement help wanted 
    opened by gurupras 22
  • Ability to route to different pages during the tour?

    Ability to route to different pages during the tour?

    Is this component capable of following steps across different pages? In other words, can the next step button route to a new page and continue the tour?

    opened by DerekNMartin 17
  • Ability to Highlight the target div

    Ability to Highlight the target div

    It would be great to be able to highlight the target div as deemonstrated in image below image

    enhancement 
    opened by SamuelIrungu 14
  • How to configure it on Nuxt?

    How to configure it on Nuxt?

    Hi, i'm currently using Nuxt and i can't setting up this plugin to work with, i really hope it can be used and help me on it.

    opened by Segueidx 13
  • TypeScript @type definition

    TypeScript @type definition

    How can I use it in typescript?

    enhancement 
    opened by lucabecchetti 11
  • in IE11,click 图和

    in IE11,click 图和

    wontfix 
    opened by goSunadeod 11
  • Provide types for typescript

    Provide types for typescript

    • Create index.d.ts

    • Create vue.d.ts

    • Update package.json

    opened by glorat 11
  • Missing posibbility to translate texts

    Missing posibbility to translate texts

    Hi, can you add a possibility to translate texts in the app, please? Right now all the texts are hardcoded and it is not possible to easily use this lib in a different language.

    enhancement 
    opened by ondrej-janosik 11
  • Hack-ish way to add highlight to active element

    Hack-ish way to add highlight to active element

    I know this feature is something you guys are/will work on, but I can't wait so i found an easy hack that works for me and I think it might help others as well so i'm sharing this here. More about this feature in here: #11

    Code

    You can find the full code here: https://gist.github.com/Art3miX/88fc3a56353ca8045f49bc8f7cc6543f

    I use it as a mixin because i do several tours (1 per specific route), so its an easy way for me to add it quickly, but you can simply take the code from the functions and add it to the place you need it. The css is in a comment at the end of the page.

    Support

    The code use CSS pointer-events and JS classList add and remove functions, you can find the support table here: https://caniuse.com/#feat=pointer-events https://caniuse.com/#feat=classlist

    Only tested on chrome for now, but should work for all major versions.

    What it does?

    Highlight

    It basically adds a shadow around the active step element with 0.6 opacity which gives a nice background above the rest of the page.

    Disable clicks

    It uses pointer-events: none on the body to disable all click events, and the active step element uses pointer-events: auto, to enables clicks only on that active element. You can disable events for all of the page including the active element if wanted, simply remove the class from the rule, BUT don't forget to leave pointer-events: auto; on the v-tour class so the tour will be clickable.

    Responsive

    I added few media queries to make the shadow smaller for smaller devices simply because we don't need 10kpx around the div for devices that are 700px wide. The size of the shadow is still larger from the size of the screen just in case, this can be modified to be smaller if you want to.

    Notes

    I built it for my self and it has everything I need, i will most likely upgrade it a bit for my needs and will keep the file updated, but this is a simple hack-ish way to get it done, make sure to test it before using it.

    I'm not working on this project in any way, this is simply how i implemented this feature for my own use, so take the code and play with it for your use, i know the guys are working on this feature in a more stable and better way.

    Suggestions / bugs

    Any suggestions to make it better will be appreciated, and if you found a bug let me know please.

    enhancement 
    opened by Art3miX 10
  • chore(deps): bump url-parse from 1.5.1 to 1.5.3

    chore(deps): bump url-parse from 1.5.1 to 1.5.3

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Support next/prev function with the behavior that step is skipped with TargetNotFound

    Support next/prev function with the behavior that step is skipped with TargetNotFound

    This is not a bug. This function will improve vue-tour behavior when the tag element is not founded.

    I use next/prev override function like below. How do you think it supported in vue-tour with selectable option?

        nextStepTour(currentStep) {
          for (var i = currentStep + 1; i < this.steps.length; i++) {
            const target_element = document.querySelector(this.steps[i].target);
            if (target_element) {
              if (i == currentStep + 1) {
                break;
              } else {
                const tour = this.$tours["home"];
                this.$nextTick(() => {
                  tour.currentStep = i;
                });
                break;
              }
            }
          }
        },
        previousStepTour(currentStep) {
          for (var i = currentStep - 1; i > -1; i--) {
            const target_element = document.querySelector(this.steps[i].target);
            if (target_element) {
              if (i == currentStep - 1) {
                break;
              } else {
                const tour = this.$tours["home"];
                this.$nextTick(() => {
                  tour.currentStep = i;
                });
                break;
              }
            }
          }
        }
    
    opened by quroom 1
  • Show progress bar or stepper

    Show progress bar or stepper

    I use <v-tour name="myTour" :steps="steps" :options="tourOptions"></v-tour> construction in the vue-tour. I want to add progress bar or stepper to the vue-tour template, but I don't know how to do it.

    console.log(this.$tours["myTour"]) show me currentStep and numberOfSteps. But I can't to add any element in vue-tour template. How can I do this?

    opened by Sh1ftOo 0
  • chore(deps): bump path-parse from 1.0.6 to 1.0.7

    chore(deps): bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Using ESC key doesn't call onEnd/onSkip callbacks

    Using ESC key doesn't call onEnd/onSkip callbacks

    Describe the bug

    While the buttons call the onEnd/onSkip callbacks just fine, no callback is used when the ESC key is used.

    To Reproduce Steps to reproduce the behavior:

    1. Specify onEnd and onSkip callbacks
    2. Press ESC key

    Expected behavior I'd expect that one of the callbacks is fired to inform me that the tour has ended.

    Desktop (please complete the following information):

    • OS: Windows 10
    • Browser Chrome 92.0.4515.107
    • Version Vue-Tour 2.0.0
    opened by m-mohr 0
  • feat: support for vue sfc & target element click to next step

    feat: support for vue sfc & target element click to next step

    Ability to pass a single file component.

    Usage

    steps: [
      {
          component: {
    	  vue: VButton,
    	  content: `Hello World`,
              data: {
                type: "success"
    	  },
    	  listeners: {
    	      click: () => { console.log("clicked button") }
              }
          }
      }
    ]
    

    Ability to progress the tour when user clicks on target element:

    Usage

    steps: [
      {
          target: "#button-element",
          // Progresses to next step on click
          targetIsBtn: true
      },
      {
          target: "#button-element2",
          // custom callback
          targetIsBtn: () => { 
            console.log("custom function")
            // call nextstep manually in this case 
            this.$tours["myTour"].nextStep();
          }
      }
    ]
    
    opened by Cameron-McBroom 1
  • get instance of popper.js

    get instance of popper.js

    Thank you for the nice package. Could you please advise me on what is the best way to get instance of popper.js for further tooltip’s position recomputation?

    opened by vkozhevnikova 0
  • Arrow css position issue

    Arrow css position issue

    Describe the bug The arrow is not positioned correctly.

    Expected behavior A clear and concise description of what you expected to happen. Arrow be in the middle

    Screenshots Screen Shot 2021-06-09 at 12 26 20 pm

    Screen Shot 2021-06-09 at 12 26 27 pm

    Desktop (please complete the following information):

    • OS: ios
    • Browser chrome/safari
    • Version v2
    opened by cain 1
  • chore(deps): bump dns-packet from 1.3.1 to 1.3.4

    chore(deps): bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Vue instance is not reachable from before() method

    Vue instance is not reachable from before() method

    Describe the bug I wanted to use before() method to make an actual change in my UI (show a modal), but I cannot reach my modals, eventBus or anything in my app by this, as I usually do. I tried to maybe change the type of before method (not arrow but function ()) but it didn't help.

    To Reproduce Steps to reproduce the behavior:

    1. Make a method/modal reachable in whole app, e.g. modal or $eventBus.
    2. Create a step with before() method and try to interact with defined method/modal, e. g. this.$eventBus.
    3. Get an error about "$eventBus of undefined" because it doesn't recognize this as Vue instance.

    Expected behavior I can reach $eventBus or any globally reachable object/method of my app.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: ubuntu 20,04
    • Browser: chrome, ff
    • Version: latest
    opened by NikoFoX 0
Releases(v2.0.0)
  • v2.0.0(Mar 28, 2021)

    Bug Fixes

    Features

    • update Popper.js to v2.x (5d8f790)

    BREAKING CHANGES

    • Popper.js: as Popper.js has been updated, all custom Popper.js options passed in step params must be changed to their Popper.js v2.x equivalent.
    • options: all custom options are now in camelCase. If you customized highlight classes, you should change the options' keys to camelCase. See (9041d2f) for the complete change.
    Source code(tar.gz)
    Source code(zip)
  • v1.6.0(Mar 27, 2021)

  • v1.5.0(Jul 14, 2020)

    Features

    • before: adds support for rejecting promises from the before method along with supporting unit tests (bfee650)
    • tour: added promises for start, next, and prev so that users of the component may do async operations to get the UI in a good state (3af3496)
    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Feb 6, 2020)

    Features

    • add example step title and link to placement options (4cd8ccc)
    • add options.debug flag for console output (effbd1d), closes #101
    • buttons: support global and per step button configuration (86fd9b8)
    • add BEM compliant class names to step buttons (34b9625)
    • add enabledButtons new props (all true by default) which can (1354557)

    Bug Fixes

    • pass a copy of the enabledButtons configuration object (9fb0ec9)
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Dec 30, 2019)

  • v1.1.0(Oct 16, 2018)

    Bug Fixes

    • bump the circleci node version to allow the tests to run (aeeb2f3)
    • Changed @click on Steps to @click.prevent (d2b7a11)
    • destructuration doesn't work, the parameter(s) has to be passed directly (bccf4ee)
    • resolve vulnerabilities reported by npm (38cb274)

    Features

    • add a new step to show off the target handling in corners (16fd73f)
    • add optional starting step to VTour (13d6996)
    • add options to change navigation buttons text (f1a4302)
    • use jump.js for more options per step (64eb8d1)
    • scroll: use jump.js to scroll only when scroll options are defined (97667bd)
    • steps: add the possibility to change the text of the buttons through the tour options (2ead09e)
    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Mar 16, 2018)

  • v1.0.0(Mar 16, 2018)

    Bug Fixes

    • add default props to prevent error when the property is not passed (3405237)
    • prevent the tour of starting again when using arrow keys (d7e8d42)
    • remove the side-effects by removing only our event listener (3b9e389)

    Features

    • add a GitHub button on the demo and scroll back to the top (94adbdd)
    • add a header slot in VStep (8cd3883), closes #6
    • add custom callback management (83481b1), closes #4
    • add support for Popper's parameters (4328c37), closes #5
    • handle keyboard events + support a config prop + min and max props (bba1ed6)
    • initial constant file (623e962)
    • prevent dismissing the tour using the keyboard (bd73513)
    • prevent dismissing the tour when using previousStep on the first step (fa93aac)
    • use isFinished in previous/nextStep + reset isFinished when starting the tour (b70c371)
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-beta.0(Feb 22, 2018)

    Bug Fixes

    • attempt to fix the demo (da58bfc)
    • change the CircleCI configuration (fd0f90e)
    • change the PayPal link (07658ce)
    • fix tests and improve error handling (a53b281)
    • make the project build (e0d3df4)
    • prepare the build for a deployment on GitHub Pages (e20cb1d)
    • ci: change the environment for Cypress (ef5a537)
    • ci: install dependencies as root (e8c8e67)
    • ci: revert the environment and install Cypress' dependencies (80832c9)
    • ci: run the webserver and start the e2e tests manually (5ea7219)

    Features

    • add a minimal demo file to quickly test the build (225a2e0)
    • change the build command to package the code as a library (d875f43)
    • change the text of the landing and the default style of steps (48fb1b9)
    • improve the layout of the demo (0489c20)
    • install the plugin automatically if Vue has been added to the global scope (4f469c6)
    • minor variable declaration improvement (262374f)
    • ci: copy and move folders to be ready for deployment (ea8b089)
    Source code(tar.gz)
    Source code(zip)
Owner
Pulsar
We make modern web applications and websites.
Pulsar
🧙🏻‍♂️ Vue Wizard

Wizard Italia component Opinionated component to create your guided wizard. Installation yarn add wizard-italia-component or npm install wizard-itali

Developers Italia 2 Oct 2, 2021
Lightweight and customizable step-by-step progress/wizard component for Vue.

Lightweight and customizable step-by-step progress/wizard component for Vue.

Furkan Başaran 7 Jun 3, 2021
An easy and clean VueJS 2.x wizard plugin

vue-good-wizard An easy and clean VueJS 2.x wizard plugin Live Demo vue-good-wizard Demo Follow the project progress live Vue-good-wizard Project Gett

null 285 Oct 13, 2021
vue step wizard

vue step wizard

Bekzod 0 Oct 7, 2021
A simple Vue component that displays a Progress Bar with labels for each step

A simple Vue component that displays a Progress Bar with labels for each step

Sebastian Hiebl 33 Aug 17, 2021
A simple stepper with simple actions such as next, back and end to perform simple forms.

Stepper Stepper for Vue. A simple stepper with simple actions such as next, back and finish to perform simple forms. Live Demo Installation npm instal

Pygmy Slow Loris 337 Oct 17, 2021
Vue.js 2 wizard

Vue form wizard A dynamic wizard to split your forms easier Vue-form-wizard is a vue based component with no external depenendcies which simplifies ta

BinarCode 1.1k Sep 30, 2021