Create a tour
In this guide, you will learn how to create a tour using the vuejs-tour
package.
Creating Steps
First of all, you need to create an array of steps. Each step should have a target
and content
property. The target
property is a CSS selector that points to the element that the step should target. The content
property is the text that will be displayed in the tour.
vue
<script setup lang='ts'>
import HelloWorld from './components/HelloWorld.vue';
import { VTour } from '@globalhive/vuejs-tour';
import '@globalhive/vuejs-tour/dist/style.css';
const steps = [{
target: '[data-step="0"]',
content: 'Step 1',
},{
target: '.some-class',
content: 'Step 2',
},{
target: '#some-id',
content: 'Step 3',
}];
</script>
After creating the steps, you need to pass them to the VTour
component as a prop.
vue
<template>
<VTour/>
<VTour :steps="steps"/>
<div>
<a href="https://vitejs.dev" target="_blank">
<a data-step="0" href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<a href="https://vuejs.org/" target="_blank" class="some-class">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<HelloWorld id="some-id" msg="Vite + Vue" />
</template>
Starting the Tour
To start the tour, you can use the autoStart
prop. Or you can start the tour manually by calling the startTour
method on the VTour
component.
Using autoStart
prop
vue
<template>
<VTour :steps="steps"/>
<VTour :steps="steps" autoStart/>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
Using startTour
method
vue
<script setup lang='ts'>
import HelloWorld from './components/HelloWorld.vue';
import { VTour } from '@globalhive/vuejs-tour';
import '@globalhive/vuejs-tour/dist/style.css';
const steps = [...];
const vTour = ref();
vTour.value.startTour();
</script>
<template>
<VTour :steps="steps"/>
<VTour :steps="steps" ref="vTour"/>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
That's it! You have successfully created a tour using the vuejs-tour
package.