https://github.com/wobsoriano/vue-driver
Drive the user's focus across the page.
https://github.com/wobsoriano/vue-driver
driver vue
Last synced: 6 months ago
JSON representation
Drive the user's focus across the page.
- Host: GitHub
- URL: https://github.com/wobsoriano/vue-driver
- Owner: wobsoriano
- License: mit
- Created: 2023-07-26T17:39:57.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T18:07:41.000Z (over 1 year ago)
- Last Synced: 2025-04-15T02:19:22.086Z (6 months ago)
- Topics: driver, vue
- Language: TypeScript
- Homepage:
- Size: 102 KB
- Stars: 23
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-driver
Drive the user's focus across the page with Vue and [Driver.js](https://driverjs.com).
## Install
```bash
npm install vue3-driver
```
## Usage
Install the plugin
```js
import { VueDriver } from 'vue3-driver'
import 'driver.js/dist/driver.css'
const app = createApp(App)
app.use(VueDriver, {
// Driver.js options
// https://driverjs.com/docs/configuration
})
```
Use directive to add steps, and composable to start driving
```vue
import { useDriver } from 'vue3-driver'
const driver = useDriver()
onMount(() => {
driver.drive()
})
Welcome to My Website
Some content...
2023 My Website. All rights reserved.
```
### Indexing
By default, the steps run from top to bottom depending on the directive placements. If you want to customize the arrangement, you can add an `index` property to the directive value, or via modifiers:
```vue
```
### Highlight
You can pass a `ref` when you want to highlight an element as well:
```ts
import { onMount, ref } from 'vue'
import { useDriver } from 'vue3-driver'
const driver = useDriver()
const element = ref(null)
onMount(() => {
driver.highlight({
element,
popover: {}
})
})
```
## License
MIT