Features

Work in progress.

Debug (v1.3.x+)

Vue Tour comes with debug option, allowing you to see logs from the plugin. By default, you won't be able to see debug logs such as: [Vue Tour] Highlight is disabled for .v-step[id="b4820cfe"]

<v-tour name="myTour" :steps="steps" :callbacks="callbacks" :options="{ debug: true }">

Highlight (v1.2.x+)

You can highlight the element showcased by the current step by setting the highlight option to true.

<v-tour name="myTour" :steps="steps" :callbacks="callbacks" :options="{ highlight: true }">

You can also disable the highlight on a step basis by using step params.

data () {
  return {
    steps: [
      {
        target: '#v-step-0',
        content: `Discover <strong>Vue Tour</strong>!`,
        params: {
          highlight: false
        }
      },
      ...
    ]
  }
}

Caveats

If you are customizing the template, don't forget to pass the highlight property to the VStep props:

<v-step
  v-if="tour.currentStep === index"
  v-for="(step, index) of tour.steps"
  :key="index"
  :step="step"
  ...
  :highlight="tour.highlight"
>

Disable scroll between steps

By default Vue Tour scrolls between each steps. You can override this behavior by adding enableScrolling: false to step params you don't want scroll enabled.

{
  target: '#v-step-0',
  content: `Discover <strong>Vue Tour</strong>!`,
  params: {
    enableScrolling: false
  }
}

Customization

By default the shadow is a solid thin box-shadow. If you want to have a full backdrop overlay over the entire viewport you can customize the .v-tour__target--highlighted class and set a very large box-shadow (99999px for example):

.v-tour__target--highlighted {
  box-shadow: 0 0 0 99999px rgba(0,0,0,.4);
}