You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To create multiple tours, you can use the `steps` and `name` prop to switch between different tours.
2
+
3
+
To create multiple tours, use the `steps` and `name` props to switch between different tours.
3
4
4
5
### Defining the tours
5
-
First you need to define the steps for each tour.
6
6
7
-
```vue{3-7,12}
8
-
<script setup lang='ts'>
9
-
...
7
+
First define the steps for each tour.
8
+
9
+
Option 1 — recommended when the component has the “prop‑change watcher” enabled (auto‑restart on `name`/`steps` change). No manual start needed except the initial start.
10
+
11
+
```vue{3-8,12}
12
+
<script setup lang="ts">
13
+
import { ref, onMounted } from 'vue';
14
+
10
15
const tourSteps1 = [...];
11
16
const tourSteps2 = [...];
12
17
const tourSteps = ref(tourSteps1);
13
18
const tourName = ref('tour1');
19
+
20
+
// Start the first tour once mounted (or use autoStart on the component)
In this case we are creating two tours `tour1` and `tour2`.
24
-
Each with their corresponding steps `tourSteps1` and `tourSteps2`.
25
30
26
-
The `tourSteps` and `tourName`variables are reactive and can be changed at runtime.
31
+
In this case we’re creating two tours, `tour1` and `tour2`, each with their corresponding steps `tourSteps1` and `tourSteps2`. The `tourSteps` and `tourName`refs are reactive and can be changed at runtime.
27
32
28
33
### Switching between tours
29
-
To switch between tours, you just switch the `tourSteps` and `tourName` values.
30
-
```vue{10-19}
31
-
<script setup lang='ts'>
32
-
...
34
+
35
+
If the watcher is enabled, simply switch the reactive values; the tour will auto‑restart.
36
+
37
+
```vue{14-22}
38
+
<script setup lang="ts">
39
+
import { ref, onMounted } from 'vue';
40
+
33
41
const tourSteps1 = [...];
34
42
const tourSteps2 = [...];
35
43
const tourSteps = ref(tourSteps1);
36
44
const tourName = ref('tour1');
37
45
const vTour = ref();
38
-
vTour.value.startTour();
39
-
46
+
onMounted(() => vTour.value?.startTour());
47
+
40
48
function switchTour() {
41
49
if (tourName.value === 'tour1') {
42
50
tourSteps.value = tourSteps2;
@@ -45,13 +53,95 @@ To switch between tours, you just switch the `tourSteps` and `tourName` values.
45
53
tourSteps.value = tourSteps1;
46
54
tourName.value = 'tour1';
47
55
}
48
-
vTour.value.startTour();
56
+
// No need to call startTour() here when the watcher is enabled.
Now everytime you call the `switchTour` function, the tour will switch between `tour1` and `tour2`.
65
+
66
+
If you do NOT use the watcher, you can still support hot‑switching by calling `startTour()` after changing props:
67
+
68
+
```vue{16}
69
+
function switchTour() {
70
+
if (tourName.value === 'tour1') {
71
+
tourSteps.value = tourSteps2;
72
+
tourName.value = 'tour2';
73
+
} else {
74
+
tourSteps.value = tourSteps1;
75
+
tourName.value = 'tour1';
76
+
}
77
+
vTour.value?.startTour(); // manual restart when watcher is disabled
78
+
}
79
+
```
80
+
81
+
Notes
82
+
83
+
- Prefer replacing the steps array (immutable update) over mutating it in place so the change is detected reliably.
84
+
- For multiple, fully independent tours on the same page, give each `VTour` a unique `name`. IDs, highlight classes, and localStorage keys are scoped by `name`, so tours won’t collide.
85
+
86
+
# Saving Progress
87
+
88
+
You can save a user’s progress in the browser’s localStorage so they can resume later.
89
+
90
+
## Using the `saveToLocalStorage` prop
91
+
92
+
Set the `saveToLocalStorage` prop on `VTour` to control if/when progress is saved. Accepted values: `never`, `step`, `end`. The default is `never`.
0 commit comments