Create a tour
WARNING
VueJS Tour is written for Vue 3. There are no plans to support Vue 2.x
Adding the component
Add the VueJS Tour component anywhere in your app. It is recommended to add it to App.vue
and create the required steps using <script setup>
syntax.
<template>
<div>
<div id="selectByID">Selected by its id 'selectByID'</div>
<p class="selectByClass">Telected by its class 'selectByClass'</p>
<button data-step="3">Selected by the 'data-step="3"' attribute</button>
<VTour :steps="steps"/>
</div>
</template>
<script setup>
const steps = [
{
target: '#selectByID',
content: 'This is the first step',
},
{
target: '.selectByClass',
content: 'This is the second step, placed on the bottom of the target',
placement: 'bottom',
},
{
target: '[data-step="3"]',
content: 'This is the third step',
}
];
</script>
Start the tour
To start the tour, you can use the autoStart
prop...
<template>
<div>
<div id="selectByID">Selected by its id 'selectByID'</div>
<p class="selectByClass">Telected by its class 'selectByClass'</p>
<button data-step="3">Selected by the 'data-step="3"' attribute</button>
<VTour :steps="steps" autoStart/>
</div>
</template>
<script setup>
const steps = [...];
</script>
...or call the startTour()
method on the component instance.
<template>
<div>
<div id="selectByID">Selected by its id 'selectByID'</div>
<p class="selectByClass">Telected by its class 'selectByClass'</p>
<button data-step="3">Selected by the 'data-step="3"' attribute</button>
<VTour ref="tour" :steps="steps"/>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const tour = ref(null);
const steps = [...];
onMounted(() => {
tour.value.startTour();
});
</script>
The target
property of the step object can be any valid CSS selector.
If the target is not found, the step will be skipped.
Using multiple tours
To use multiple tours at once use the name
prop.
<template>
<div>
<div id="selectByID">Selected by its id 'selectByID'</div>
<p class="selectByClass">Telected by its class 'selectByClass'</p>
<button data-step="3">Selected by the 'data-step="3"' attribute</button>
<VTour :steps="steps" name="FirstTour" autoStart/>
</div>
</template>
<script setup>
const steps = [...];
</script>
This will create a separate localstorage entry if the tour is finished or skipped, so the tour will not start again.