driverjs
vue
typescript
vuetify
Preview
Install
npm install driver.js -D
Useage in vue component
<template> <div class="text-center headline"> <div class="ma-8"> <v-btn @click.prevent.stop="guide">open guide</v-btn> </div> <div> <v-btn id="b1">BUTTON</v-btn> <br /> <br /> <div class="d1" style="width:200px; border:1px solid red;">DIV</div> </div> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import Driver from 'driver.js' import 'driver.js/dist/driver.min.css' @Component({ components: {} }) export default class Introduction extends Vue { private driver: any = null private mounted() { this.driver = new Driver() console.info(this.driver) } private guide() { const steps = [ { element: '#b1', popover: { title: 'Button', description: 'This is a Vuetify UI button component', position: 'bottom' } }, { element: '.d1', popover: { title: 'Div', description: 'This is a div element', position: 'right' } } ] this.driver.defineSteps(steps) this.driver.start() } } </script>
Tips
Event modifier must be used for button click event, otherwise driverjs will not work
<v-btn @click.prevent.stop="guide">open guide</v-btn>