{"id":28718786,"url":"https://github.com/davvii1/nuxt-driver","last_synced_at":"2026-01-20T16:54:16.457Z","repository":{"id":298959633,"uuid":"998069888","full_name":"Davvii1/nuxt-driver","owner":"Davvii1","description":"Nuxt Module for Driver.js","archived":false,"fork":false,"pushed_at":"2025-06-17T16:37:34.000Z","size":156,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-18T20:23:52.055Z","etag":null,"topics":["driverjs","highlight","nuxt","nuxt-tour"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Davvii1.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-07T19:55:37.000Z","updated_at":"2025-06-18T22:58:30.000Z","dependencies_parsed_at":"2025-06-14T01:26:10.969Z","dependency_job_id":"b14eaea2-5f3b-449f-bf1a-fadf677e0c45","html_url":"https://github.com/Davvii1/nuxt-driver","commit_stats":null,"previous_names":["davvii1/driverjs-nuxt","davvii1/nuxt-driver"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Davvii1/nuxt-driver","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Davvii1%2Fnuxt-driver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Davvii1%2Fnuxt-driver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Davvii1%2Fnuxt-driver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Davvii1%2Fnuxt-driver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Davvii1","download_url":"https://codeload.github.com/Davvii1/nuxt-driver/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Davvii1%2Fnuxt-driver/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269654067,"owners_count":24454318,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["driverjs","highlight","nuxt","nuxt-tour"],"created_at":"2025-06-15T05:04:27.175Z","updated_at":"2026-01-20T16:54:16.430Z","avatar_url":"https://github.com/Davvii1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt Driver | Driver.js Nuxt Module\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nA Nuxt 3 module that brings the powerful [Driver.js](https://driverjs.com/) library to your Nuxt applications. Create beautiful, interactive product tours, feature highlights, and user onboarding flows with minimal effort. The module provides a declarative and programmatic API, supporting both CSS selectors and Vue template refs for maximum flexibility. With built-in TypeScript support, reactive state management, and a rich set of features, you can create engaging user experiences while maintaining full control over the tour flow and appearance.\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n\u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Features\n\n- 🎨 **Fully Typed**: Complete TypeScript support with type definitions\n- 🔌 **Auto-import**: Driver.js components and composables are auto-imported\n- 🛠️ **Flexible API**: Choose between declarative and programmatic usage\n- 🔄 **Reactive State**: Track tour progress and state with reactive properties\n- 🎯 **Multiple Targeting**: Use CSS selectors or template refs to target elements\n- 🎭 **Custom Components**: Built-in `Tour` component with slot support\n- ✨ **Directive Support**: `v-step` and `v-highlight` directives for easy integration\n- 🔄 **Progress Tracking**: Built-in progress indicators for multi-step tours\n- 🎨 **Customizable**: Full access to Driver.js configuration options\n\n## Quick Setup\n\n1. Add the module to your Nuxt project:\n\n```bash\nnpx nuxi module add nuxt-driver\n```\n\n2. The module will automatically register the necessary components and composables.\n\n## Usage\n\n### 1. Using `useDriver` Composable\n\nThe `useDriver` composable provides programmatic control over tours. There are two ways to use it:\n\n#### Method 1: With CSS Selectors\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"startTour\"\u003eStart Tour\u003c/button\u003e\n    \u003cdiv id=\"section1\"\u003eFirst step content\u003c/div\u003e\n    \u003cdiv id=\"section2\"\u003eSecond step content\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst { drive, isActive } = useDriver({\n  showProgress: true,\n  steps: [\n    {\n      element: '#section1',\n      popover: {\n        title: 'First Step',\n        description: 'This is the first step of the tour.'\n      }\n    },\n    {\n      element: '#section2',\n      popover: {\n        title: 'Second Step',\n        description: 'This is the second step.'\n      }\n    }\n  ]\n});\n\nconst startTour = () =\u003e {\n  drive();\n};\n\u003c/script\u003e\n```\n\n#### Method 2: With Template Refs\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"startTour\"\u003eStart Tour\u003c/button\u003e\n    \u003cdiv ref=\"step1\"\u003eFirst step content\u003c/div\u003e\n    \u003cdiv ref=\"step2\"\u003eSecond step content\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst step1 = ref(null);\nconst step2 = ref(null);\n\nconst { drive, isActive } = useDriver({\n  steps: [\n    {\n      element: step1,\n      popover: {\n        title: 'First Step',\n        description: 'This is the first step of the tour.'\n      }\n    },\n    {\n      element: step2,\n      popover: {\n        title: 'Second Step',\n        description: 'This is the second step.'\n      }\n    }\n  ]\n});\n\nconst startTour = () =\u003e {\n  drive();\n};\n\u003c/script\u003e\n```\n\n### 2. Using the `Tour` Component with `v-step`\n\nThe `Tour` component provides a declarative way to create tours using the `v-step` directive. **Note:** The `v-step` directive can only be used inside a `Tour` component.\n\n```vue\n\u003ctemplate\u003e\n  \u003cTour v-slot=\"{ drive, isActive: isTourActive }\"\u003e\n    \u003ch1 v-step:1=\"{ title: 'Welcome', description: 'This is the first step' }\"\u003e\n      Welcome to Our App\n    \u003c/h1\u003e\n    \n    \u003cdiv v-step:2=\"{ title: 'Features', description: 'Check out our features' }\"\u003e\n      Our Amazing Features\n    \u003c/div\u003e\n    \n    \u003cbutton @click=\"drive\"\u003e\n      {{ isTourActive ? 'Stop Tour' : 'Start Tour' }}\n    \u003c/button\u003e\n  \u003c/Tour\u003e\n\u003c/template\u003e\n```\n\n### 3. Using `v-highlight` Directive\n\nHighlight important elements anywhere in your app:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton \n      v-highlight=\"{\n        title: 'Important Feature',\n        description: 'Click here to perform an important action',\n        active: shouldHighlight\n      }\"\n    \u003e\n      Important Button\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst shouldHighlight = ref(true);\n\u003c/script\u003e\n```\n\n## Available Properties and Methods\n\n#### `useDriver` Return Value\n- `drive(stepIndex?)`: Start the tour or go to a specific step\n- `isActive`: Whether the tour is currently active\n- `state`: Current driver.js state\n- `hasNextStep`: Whether there's a next step\n- `hasPreviousStep`: Whether there's a previous step\n- `activeIndex`: Current step index\n- `activeStep`: Current step configuration\n- `previousStep`: Previous step configuration\n- `activeElement`: Currently highlighted DOM element\n- `previousElement`: Previously highlighted DOM element\n\n#### `Tour` Component\n- **Props**:\n  - `steps`: Array of step configurations (alternative to using `v-step`)\n  - All other [Driver.js configuration options](https://driverjs.com/docs/configuration) are supported\n- **Slot Props**:\n  - `drive`: Function to start the tour\n  - `isActive`: Boolean indicating if tour is active\n  - `activeStep`: Current active step configuration\n  - `activeIndex`: Current step index\n  - All other state properties from `useDriver`\n\n\n### Credits\n\nThis module is built on top of the amazing [Driver.js](https://github.com/kamranahmedse/driver.js) library by [Kamran Ahmed](https://github.com/kamranahmedse).\n\nDriver.js is a light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the page. It's MIT licensed and can be found at [driverjs.com](https://driverjs.com).\n\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-driverjs/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-version-href]: https://www.npmjs.com/package/nuxt-driver\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-driverjs.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-downloads-href]: https://www.npmjs.com/package/nuxt-driver\n\n[license-src]: https://img.shields.io/npm/l/nuxt-driverjs.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[license-href]: https://www.npmjs.com/package/nuxt-driver\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\n[nuxt-href]: https://nuxt.com","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavvii1%2Fnuxt-driver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavvii1%2Fnuxt-driver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavvii1%2Fnuxt-driver/lists"}