Use in an SPA context

[grantholle]

I'm using this in an SPA (Vue) setup. I can launch the tour, however nothing is rendered properly. If I do a full refresh of the page, it starts and renders correctly. However, calling tour.start() between page loads or after navigating between pages and launching with a button click triggers an empty dialog:

I'm using a composition function,

import '@sjmc11/tourguidejs/src/scss/tour.scss'
import { TourGuideClient } from '@sjmc11/tourguidejs/src/Tour'
import { inject } from 'vue'

export default function useTours(tourName) {
  const $http = inject('$http')
  const unFlag = async () => {
    try {
      await $http.post(`/flags/${tourName}`)
    } catch {}
  }
  const tour = new TourGuideClient()
  tour.onAfterExit(() => {
    unFlag()
  })

  const tours = {
    'onboarding-home': [
      {
        title: '👋 Welcome to Lesson Genie!',
        content: 'This is the home page of Lesson Genie. Here you can find your weekly lesson schedule and navigate to other parts of the application.',
        group: tourName,
      }
    ],
  }

  tour.addSteps(tours[tourName])

  return tour
}

And in my component, implementing it:

import useTours from '@/composition/useTours.js'

const homeTour = useTours('onboarding-home')
homeTour.start()

I've also tried nesting it in an onMounted call with the same result. I've also tried additional calls to tour.refresh() with the same results.

[leonardospeca]

Hi, did you resolve this problem?

[naiquevin]

I'm facing the same issue. I'm also using Vue for SPA. I tried tg.refresh in vue's beforeUnmount hook but it doesn't work and in fact starts the tour when the page changes. I also tried the following in the beforeUnmount hook, which also doesn't seem to work.

    tg.finishTour().then(() => tg.deleteFinishedTour());