search

GlobalHive / vuejs-tour

VueJS Tour is a lightweight, simple and customizable tour plugin. It provides a quick and easy way to guide your users through your application.
https://globalhive.github.io/vuejs-tour/
MIT License
79 stars 6 forks source link

Named tours #31

Closed kevmul closed 11 months ago

kevmul commented 11 months ago

currently all tours, after finished or skipped, store a value in the LocalStorage under the name of vjs-tour. If this value becomes true then the tour does not start. Which is great so we don't have the tour constantly in popping up.

However, if we have 2 pages and need to have a tour on both pages, then there is no way currently (that I know of) to differentiate these tours.

I think the best solution is to implement a name prop where we can pass a string. This should probably be required to prevent issues with forgetting and having some default through out their application.

In the (Vue Tour)[https://github.com/pulsardev/vue-tour] package, they reference the name to start their tour. We wouldn't need that as we can reference directly 

const myTour = ref()

myTour.value.startTour()

So the name could just be for the localStorage. 

<VTour ref="myTour" name="uniqueTourName" :steps="steps" />

--- Local Storage
vjs-uniqueTourName | true // After finished.

Or maybe we can just use the ref?

<VTour ref="myTour" :steps="steps" />

--- Local Storage
vjs-myTour | true // After finished.
GlobalHive commented 11 months ago

Hello @kevmul thanks for the issue, you're totally right, didn't think of that. I'll add a name prop today and push a new version.

Thanks