Tour configuration

When initializing your tour, you may pass an object to the options prop.

Your custom configuration object doesn't need to (re)declare every values, you only need to define what you want to change.

This prop currently support the following properties:

• useKeyboardNavigation
• default: true

If set to true you may use the ←, → and ESC keys to navigate through your tour.

• startTimeout
• default: 0 (in milliseconds)

Defines the timeout before which the tour starts.

You can also customize the labels of the tour's buttons.

labels: {
  buttonSkip: 'Skip tour',
  buttonPrevious: 'Previous',
  buttonNext: 'Next',
  buttonStop: 'Finish'
}

Example

<template>
  <div>
    <div id="v-step-0">A DOM element on your page.</div>
    <div id="v-step-1">A DOM element on your page.</div>
    <div id="v-step-2">A DOM element on your page.</div>

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

<script>
  export default {
    name: 'my-tour',
    data () {
      return {
        myOptions: {
          useKeyboardNavigation: false,
          labels: {
            buttonSkip: 'Skip tour',
            buttonPrevious: 'Previous',
            buttonNext: 'Next',
            buttonStop: 'Finish'
          }
        },
        steps: [
           // ... Your steps array
        ]
      }
    },
    mounted: function () {
      this.$tours['myTour'].start()
    }
  }
</script>