Currently, I am utilizing intro.js in conjunction with the vue-intro.js binding to create an onboarding experience for my users. This walkthrough should seamlessly guide them through various routes within the application.
For more information: vue binding https://github.com/alex-oleshkevich/vue-introjs intro.js docs
While I have successfully implemented it using v-directives, I aim to extend this functionality across multiple routes with programmatic navigation.
I have experimented with different methods of selecting elements, such as query selectors, but without success. Additionally, I have tried various combinations of mounted/created methods.
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")
)
My objective is to seamlessly navigate through each step and trigger the oncomplete( () => callback) event when transitioning between pages. This will allow me to progress through different Vue pages while maintaining the continuity of the onboarding process.