Customizing the template¹

Vue Tour makes an extensive usage of Vue.js slot functionnality to allow you to customize nearly every aspects of the steps of your tour. The simplest way of inserting a tour in your page is by just using a v-tour component.

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

This component contains a default slot that wraps a v-for loop over the steps passed as a prop. And the steps themselves contain two slots: a content slot and an actions slot. Then, if you want to override the DOM of the steps you can do it by overriding the slots like so:

<v-tour name="myTour" :steps="steps">
  <template slot-scope="tour">
    <transition name="fade">
      <v-step
        v-if="tour.currentStep === index"
        v-for="(step, index) of tour.steps"
        :key="index"
        :step="step"
        :previous-step="tour.previousStep"
        :next-step="tour.nextStep"
        :stop="tour.stop"
        :is-first="tour.isFirst"
        :is-last="tour.isLast"
        :labels="tour.labels"
      >
        <template v-if="tour.currentStep === 2">
          <div slot="actions">
            <button @click="tour.previousStep" class="btn btn-primary">Previous step</button>
            <button @click="tour.nextStep" class="btn btn-primary">Next step</button>
          </div>
        </template>
      </v-step>
    </transition>
  </template>
</v-tour>

Here we changed only the actions slot of the third step (the count begins at 0). The slot in the v-tour component is scoped so that you can use its internal properties and methods.

¹. This section is a work-in-progress. ↩