Ability to route to different pages during the tour?

[pulsardev]

Ability to route to different pages during the tour?

[mmorainville]

Hi @DerekNMartin,

Yes it's possible right now with the current version (1.0.1) but for that you need to customize the step template to override the nextStep() action and there is several ways to do that.

Of course, the v-tour component will have to be placed outside the <router-view> but it should already be the case if it's in your App.vue.

Then you can customize the template like described here: https://pulsar.gitbooks.io/vue-tour/customizing-the-template.html

The idea will be to override the nextStep action to change the route before incrementing the currentStep index.

<div slot="actions">
  <button @click="tour.previousStep" class="btn btn-primary">Previous step</button>
  <button @click="myCustomNextStep" class="btn btn-primary">Next step</button>
</div>

myCustomNextStep () {
  this.$router.push('home')
}

Then when you arrive on the new page you can then call nextStep manually:

mounted: function () {
  this.$tours['myTour'].nextStep()
}

As the tour has not been stopped nor even destroyed between the pages, it will simply continue.

Also instead of customizing the whole step template, you could eventually just use a custom callback. The feature is available but not yet documented.

It goes like this:

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

data () {
  return {
    myCallbacks: {
      onNextStep: function (currentStep) {
        // Just make sure to execute the route change only if it's the last step of the current page, here for example index = 2 (so it's step 3, the callback will be called from step 3 to 4)
        if (currentStep === 2) {
          this.$router.push('home')
        }
      }
    }
  }
}

And then on the new page do the same as before, just call nextStep manually when it's mounted.

[regexj]

It's an old thread but I'll chip in with my solution. I have achieved multi-page tours in our SPA by using the before function (documented here). E.g.

steps: [
  {
    content: 'This step is on the page the tour loaded at...',
  },
  {
    content: 'We are on the dashboard now',
    before: () => new Promise((resolve) => {
      this.$router.push({ name: RouteNames.ROUTE_DASHBOARD });
      resolve(true);
    })
  }
]

Continue as needed.

[mmorainville]

Hi @Elaniobro,

I had some issue with your Sandbox (cannot read property start() of undefined) so I've edited it a bit (just set a setTimeout for the call to trendingTour.start() and trendingTour.nextStep().

Anyway the issue seems to be that when changing the page, the tour stops somehow, so when you call .nextStep() the tour actually try to fetch #v-step-0 instead of 1.

So what you may want to do to fix your issue, is rather than calling .nextStep() try to restart the tour at the wanted step with .step(1) for example.

The tour stopping when switching pages may come from this line: https://github.com/pulsardev/vue-tour/blob/master/src/components/VStep.vue#L129 though I'm not entirely sure, I should try to reproduce that in a non-Nuxt environment to see if it changes anything.

[DerekNMartin]

Perfect, thanks for the detailed response!

[theromie]

I did same thing and its working but if i directly click on router and don't start tour in mounted it shows
Cannot read property 'nextStep' of undefined

[shainshayusuf]

Error in v-on handler (Promise/async): "TypeError: this.$router is undefined"

found in

--->



at src/App.vue
vue.runtime.esm.js:619

[shainshayusuf]

this.$router is undefined when i am using the above code

[mmorainville]

Hi @shainshayusuf,

Can you show us your code?
You are probably using a simple function declaration instead of an anonymous function, thus losing the this context.

[Elaniobro]

How do you force/trigger the highlight, when the route changes?

So far, I have only been able to get it working when I start the tour again:

mounted: function () {
  this.$tours['myTour'].start()
}

vs the aforementioned nextStep()

mounted: function () {
  this.$tours['myTour'].nextStep()
}

[mmorainville]

Hi @Elaniobro,

Weird it should work, do you have a CodePen to reproduce this issue? Anyway I don't think your problem has something to do with the original problem of this issue, so you should open a new one.
You can also try to put the highlight also in the next step, as described here: https://github.com/pulsardev/vue-tour/wiki/Features#highlight-v12x.

[Elaniobro]

@mmorainville sure, please see: https://codesandbox.io/s/youthful-butterfly-pmodx

[Elaniobro]

@mmorainville thanks again for the quick reply and suggestion.

using this.$tour.trendingTour.start(1) in my usecase does not seem to fix it. Oddly enough, if I continue the tour after going to the new route and staying on said route, the highlight picks back up on the next step.

eg.:

step-0: index highlight: true
step-1: about highlight: false
step-2: about highlight: true

note: highlight key:value on the step in the trendingTour obj do not change in the code, just using it here to illustrate the behavior.

[mmorainville]

@Elaniobro, and there is no error in the console?
In your Sandbox I had .style of undefined because like I said the targetElement was not mounted yet.
Did you try .start(1) with a setTimeout of 1 second just to be sure? If it's working, you could then eventually try putting a this.nextTick() before your call to start(1).

[Elaniobro]

@mmorainville only error I see/get on my actual project, not the sandbox is:

client.js?06a0:97 TypeError: Cannot read property 'style' of null
    at VueComponent.removeHighlight (vue-tour.umd.js?2536:7724)
    at VueComponent.destroyed (vue-tour.umd.js?2536:7743)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at VueComponent.Vue.$destroy (vue.runtime.esm.js?2b0e:4003)
    at destroy (vue.runtime.esm.js?2b0e:3159)
    at invokeDestroyHook (vue.runtime.esm.js?2b0e:6114)
    at removeVnodes (vue.runtime.esm.js?2b0e:6130)
    at updateChildren (vue.runtime.esm.js?2b0e:6235)
    at patchVnode (vue.runtime.esm.js?2b0e:6319)

which I think is similar to the one you had mentioned. I am trying to playaround with nextTick but nothing seems to be working yet eg:

 mounted() {
    this.$nextTick(() => {
      this.$tours.trendingTour.start(1)
      console.log('nextTick')
    })

[mmorainville]

@Elaniobro,

Yes this is exactly the error that is preventing the highlight from being triggered.
I had no luck with nextTick() in the sandbox too, that's why I suggested a setTimeout from 1 second first ;).

That's of course not a good solution, I'm not sure why your target wouldn't be mounted in the mounted() hook. Kinda weird, but it should have something to do with Nuxt/SSR maybe and/or your project setup.

[Elaniobro]

Project is SPA, so SSR issues are out the window.
When the routing happens in:

    handleNextStep(currentStep) {
      console.log({ currentStep })
      if (currentStep === 0) {
        this.$router.push('about')
      }
    }

the next step tooltip appears on the about page before this even fires:

  mounted() {
    setTimeout(() => {
      console.log(this.$tours)
      this.$tours.trendingTour.start(1)
    }, 3000)

[Ghada-Jaber]

hello after I did in the myCallback
if (currentStep === 1) {
this.$router.push('home')
}
after he redirects me currentStep become -1 but there is next step after step 1

[qualle-admin]

I was able to achieve this functionality by simply creating multiple tours for each route(s)