Add support for calling a function or raising an event when a step loads

[brweber2]

Is it possible to raise a vue event or call a function when a step is run? I don't see it in the documentation and after a quick read through the source code I'm not sure what the best approach would be... but we would like to execute some javascript code when reaching a particular step.

Thanks.

[Outpox]

Hi! It's a planned functionality on our roadmap. I can't give you an ETA but I'll try to give it a shot soon.
I'll leave this issue open for further discussions about this request.

[mmorainville]

Hi @brweber2,

As @Outpox said, we plan to facilitate this kind of things, because it's a quite basic functionnality for a tour plugin but we didn't rush it because you can actually already do what you want by customizing the template. Though it adds quite a lot of boilerplate code and is a bit more complex than the option we plan to provide in the future.

The idea is that you can implement a custom step template (https://pulsar.gitbooks.io/vue-tour/customizing-the-template.html) that looks exactly the same as the plugin step template:

<template>
    <div slot="actions">
      <div class="v-step__buttons">
        <button @click="tour.stop" v-if="!tour.isLast" class="v-step__button">Skip tour</button>
        <button @click="tour.previousStep" v-if="!tour.isFirst" class="v-step__button">Previous</button>
        <button @click="tour.nextStep" v-if="!tour.isLast" class="v-step__button">Next</button>
        <button @click="tour.stop" v-if="tour.isLast" class="v-step__button">Finish</button>
      </div>
    </div>
</template>

And then you can replace the actions on the @click of each step buttons with any function you want.
So if for example you want to trigger an action after the first step, you can do something like:

<button @click="customNextStep(tour.currentStep)" v-if="!tour.isLast" class="v-step__button">Next</button>

And then in your customNextStep method:

customNextStep (currentStep) {
  if (currentStep === 1) {
    // make whatever action you want here
    // and then call the real nextStep function
    this.$tours['myTour'].nextStep()
  }
}

I know it's a bit cumbersome at the moment. Callbacks on actions are on high priority on our roadmap and should come during the week. But if it's really urgent, you can use this solution for now. And in general, keep in mind that you can actually do pretty much anything you want by customizing the step templates because then you'll have full control over pretty much all the plugin.

[brweber2]

Huge thanks for the rapid responses and the working example. This will get us what we need for now and we will change it once the feature is added.

[mmorainville]

Hi @brweber2,

The feature is ready, the documentation should come soon!