2

Im trying to use intro.js through the vue-intro.js binding, to created a on-boarding process for my users that is capable of browsing through different routes in the application.

vue binding https://github.com/alex-oleshkevich/vue-introjs intro.js docs https://introjs.com/docs/intro/api/

I have been able to get it working using v-directives but i want to achieve the result, across multiple routes with programmatic navigation.

I have also tried different ways to selected the elements for example query selectors, but to of no avail. Tried various combinations of mounted/created.

this.$intro().addStep({
    element: '#one',
    intro: "step one",
    position: 'right',
})

this.$intro().addStep({
    element: '#two',
    intro: "step two",
    position: 'bottom'
})

this.$intro().start().oncomplete(() =>
    this.$route.push("someroute")

)

I expect to be able to navigate through the steps and, and as they change fire the oncomplete( () => callback), to be able to navigate to different vue pages and continue to execute the onboarding process.

Suoakira
  • 101
  • 4

1 Answers1

0

One thing that I could say, IntroJS is sensitive with the currentDOM className. Once they don't find the specific element (let say your DOM are rendered late in vue), introJS will not worked. I think you can try to write it on other way by binding the message directly to the HTML using "data-intro" or "data-title" props from introJS. See their example Hello-world project --> https://introjs.com/docs/examples/basic/hello-world

Thanks

Gian Arvin
  • 11
  • 3