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.

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.

Comments
  • Doesn't correctly work with navigation draw from vuetify

    Doesn't correctly work with navigation draw from vuetify

    I've setup a very basic site with a navigation drawer ,and some tabs inside that drawer. Vue-tour fails to correctly position the popper window for any element referenced in the navigation drawer. I am able to correctly find the referenced object using document.querySelector.

    bug help wanted 
    opened by noahsilverman 22
  • 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 18
  • 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
  • Usage with Quasar components

    Usage with Quasar components

    Hi there, Great plugin. I encountered a problem with using this plugin with Quasar layout. Here is a sample https://github.com/FerrielMelarpis/repro/pull/2 I'm not sure why the Popper does not get attached properly to the component. screenshot_20180319_184358

    I'm not entirely sure if this is an issue with vue-tour or in Popper. Would be a great help if someone can help me with this issue. Thanks!

    opened by FerrielMelarpis 10
  • feat: offset and duration options for step + navigation button text options

    feat: offset and duration options for step + navigation button text options

    I needed that for my project, and I though it could be useful. This add a dependency, but allow for more control. I tried to respect the Git Commit Guidelines, but this is my first time, so please tell me if I made mistakes.

    feat: use jump.js for more options per step

    jump.js allow more options (offset, duration) offset is usefull when using fixed positionned "floating" menu for exemple scrollIntoView is not yet fully compatible on all browser

    feat: add options to change navigation buttons text

    allow to change the navigation buttons text without modifying the whole slot usefull for translation fix some lint error

    opened by lionel-bijaoui 9
  • position: Static header make the tips shifted

    position: Static header make the tips shifted

    I'm using quasar with a fixed header. I read other issues that suggested that that's a problem but I have not understood if there's a solution. If needed I can create a codesandbox.io to show the result.

    Thanks in advance

    opened by sandroden 8
  • How to disable scrolling on each step?

    How to disable scrolling on each step?

    Hi, I want to disable the window scroll on each step. Is this possible currently? Ideally I would like to pass in as a component prop or plugin option.

    opened by dylanmcgowan 8
  • How can i change the buttons text and/or language?

    How can i change the buttons text and/or language?

    Hi, i'm using vue-tour to create a tour inside a router app, so far its great, so simple, but the main language of the app is spanish and i can't find a way to change the buttons text.

    opened by fernandofloresg 8
  • v-for and v-if on v-step warning

    v-for and v-if on v-step warning

    Describe the bug When customizing the template docs show a v-for and v-if on the v-step component. Doing this throws some warnings and is generally bad practice in the Vue ecosystem.

    To Reproduce Docs example of customizing the template

    Expected behavior There should be a way to add the v-if on the step without it being on the same element as the v-for.

    Desktop (please complete the following information):

    • OS: Mac OS
    • Browser: Chrome
    opened by Skylercrane23 7
  • chore(deps): bump terser from 4.8.0 to 4.8.1

    chore(deps): bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    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
  • chore(deps): bump shell-quote from 1.7.2 to 1.7.3

    chore(deps): bump shell-quote from 1.7.2 to 1.7.3

    Bumps shell-quote from 1.7.2 to 1.7.3.

    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)
    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
  • use getComputedStyle instead of inline style

    use getComputedStyle instead of inline style

    this.targetElement.style is only for inline styles - which means VStep components would erroneously add a class (if you used highlighting) which overrides any position values regardless of whether they exist in the element's class or not. This fix will use the computed style instead.

    opened by cetooley 0
  • Get some more contextual data on callbacks

    Get some more contextual data on callbacks

    I use multiple instances of v-tour in my application at different locations such as;

     <v-tour name="feature1" :steps="steps" :options="tourOptions" :callbacks="tourCallbacks"></v-tour>
    <v-tour name="feature2" :steps="steps" :options="tourOptions" :callbacks="tourCallbacks"></v-tour>
    

    All are using the samecallback functions. It would be great if the callbacks gets some context data apart from the current step. For example, if I can get which tour is being executed (feature1 / feature2) it would be very helpful.

    Is it possible currently?

    opened by mkgn 0
  • chore(deps): bump eventsource from 1.1.0 to 1.1.1

    chore(deps): bump eventsource from 1.1.0 to 1.1.1

    Bumps eventsource from 1.1.0 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)
    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
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
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
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 Jul 11, 2022
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 354 Sep 29, 2022
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 37 Sep 18, 2022
Form Wizard Vue 3 is a simple stepper/wizard component

Form Wizard Vue 3 is a simple stepper/wizard component. It can be easily customized, has no dependencies, works in harmony with your components.

Bahadır 7 Oct 4, 2022
Simple web app to help you install all necessary apps in one go

Setup Wizard ??‍♂️ This page allows you to pick and install multiple apps at once through your mac's terminal using brew. Demo You can see it live at:

Alex Ferreira 8 Jun 10, 2022
Responsive Mobile-sized Wrapper for Vuejs - Easily prototype your mobile-sized web apps with desktop support

Responsive Mobile-sized Wrapper for Vuejs - Easily prototype your mobile-sized web apps with desktop support

Steve Juneyoung Kang 10 Jun 29, 2022
Vurian-wizard - A Wizard Vue component on Vue 3 and state machine

@vurian/wizard - A wizard machine component for Vue 3 The more organized and out

Maya Shavin 77 Aug 26, 2022
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 29, 2022
vue step wizard

vue step wizard

Bekzod 0 Oct 7, 2021
🧙🏻‍♂️ 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 4 Jun 7, 2022
EveryThought is a web application designed to help you identify and recognize your emotions through daily guided prompts and journaling.

EveryThought ☁ EveryThought is a web application designed to help you identify and recognize your emotions through daily guided prompts and journaling

Mike Roberts 2 Oct 19, 2021
Guided wizard to direct contributors

wizard-italia Guided wizard to direct contributors Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifie

Developers Italia 11 Mar 31, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

MapTiler 10 Sep 14, 2022
This app allows you to consult relevant information from Github users through their username, it is fully responsive and has light and dark themes that adapt according to your preferences.

This app allows you to consult relevant information from Github users through their username, it is fully responsive and has light and dark themes that adapt according to your preferences.

Javier Salcedo 3 Jun 14, 2022
A small Vue component that provides an easy way to animate elements as they scroll into view.

vue-animate-scroll A small Vue component that provides an easy way to animate elements as they scroll into view. Setup npm i --save vue-animate-scroll

Mike Prince 46 Aug 14, 2022
Angular 2 Tour of Heroes app built with Vue.js 2.0

Tour of Heroes - Vue.js 2.0 edition This repo contains an implementation of the Angular 2 'Tour of Heroes' tutorial app using Vue.js 2.0. https://angu

Adam Weber 29 Aug 2, 2020
Vue 3 Circle Progress - Highly customizable & lightweight circular progressbar component for Vue 3, built with SVG and extensively customizable

Highly customizable & lightweight circular progressbar component for Vue 3, built with SVG and extensively customizable

Delowar Hossain 18 Sep 28, 2022
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

Terry Zeng 74 Aug 27, 2022