Features

Work in progress.

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"
>

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:

.v-tour__target--highlighted {
  box-shadow: 0 0 0 4px rgba(0,0,0,.4);
  pointer-events: auto;
  z-index: 9999;
}