vue3-tour

// main.js import { createApp } from 'vue'; import App from './App.vue'; import Vue3Tour from 'vue3-tour'; import 'vue3-tour/dist/vue3-tour.css'; const app = createApp(App); app.use(Vue3Tour); app.mount('#app'); // App.vue <template> <div> <div id="v-step-0" style="margin: 20px; padding: 10px; border: 1px solid blue;"> A DOM element on your page. The first step will pop on this element. </div> <div class="v-step-1" style="margin: 20px; padding: 10px; border: 1px solid green;"> Another element for the second step. </div> <div data-v-step="2" style="margin: 20px; padding: 10px; border: 1px solid red;"> The final element for the third step. </div> <v-tour name="myTour" :steps="steps"></v-tour> <button @click="startTour">Start Guided Tour</button> </div> </template> <script> export default { name: 'App', data() { return { steps: [ { target: '#v-step-0', header: { title: 'Welcome!' }, content: `This is the starting point of our application tour.`, }, { target: '.v-step-1', content: 'Here you will find key information and functionalities.', }, { target: '[data-v-step="2"]', content: 'And this is where you can take action!', params: { placement: 'top' }, }, ], }; }, methods: { startTour() { if (this.$tours && this.$tours['myTour']) { this.$tours['myTour'].start(); } else { console.error("Tour 'myTour' not found. Ensure <v-tour name='myTour'> is rendered."); } }, }, mounted() { // Optionally start the tour automatically // this.startTour(); }, }; </script>