https://github.com/fatihsolhan/v-onboarding
A fully-typed, customizable onboarding component for Vue 3
https://github.com/fatihsolhan/v-onboarding
introduction onboarding vue vue-introduction vue-onboarding
Last synced: 12 days ago
JSON representation
A fully-typed, customizable onboarding component for Vue 3
- Host: GitHub
- URL: https://github.com/fatihsolhan/v-onboarding
- Owner: fatihsolhan
- License: mit
- Created: 2021-12-08T15:55:34.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2026-05-10T23:42:33.000Z (about 1 month ago)
- Last Synced: 2026-05-11T01:28:43.922Z (about 1 month ago)
- Topics: introduction, onboarding, vue, vue-introduction, vue-onboarding
- Language: TypeScript
- Homepage: https://v-onboarding.fatihsolhan.com/
- Size: 18.8 MB
- Stars: 210
- Watchers: 2
- Forks: 22
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# v-onboarding
A fully-typed, customizable onboarding component for Vue 3
> Looking for React? Check out [r-onboarding](https://github.com/fatihsolhan/r-onboarding)
[](https://www.npmjs.com/package/v-onboarding)
[](https://www.npmjs.com/package/v-onboarding)
[](https://www.npmjs.com/package/v-onboarding)
[](https://v-onboarding-docs.fatihsolhan.com/guide/nuxt)
[Demo](https://v-onboarding.fatihsolhan.com/) · [Documentation](https://v-onboarding-docs.fatihsolhan.com/)
---
## Features
- **TypeScript First** - Full type support out of the box
- **Customizable UI** - Use default styling or bring your own with slots
- **Accessible** - Built-in focus trap for keyboard navigation
- **Flexible Positioning** - Smart tooltip placement with Popper.js
- **SVG Overlay** - Highlight elements with customizable overlay
- **Lifecycle Hooks** - `onBeforeStep`, `onAfterStep` for custom logic
## Installation
```sh
# npm
npm install v-onboarding
# yarn
yarn add v-onboarding
# pnpm
pnpm add v-onboarding
```
## Nuxt
For Nuxt 3+ applications, use the built-in module:
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['v-onboarding/nuxt']
})
```
Components, composables, and styles are auto-imported. See the [Nuxt guide](https://v-onboarding-docs.fatihsolhan.com/guide/nuxt) for configuration options.
## Quick Start
```vue
import { ref } from 'vue'
import { VOnboardingWrapper, VOnboardingStep } from 'v-onboarding'
import 'v-onboarding/dist/style.css'
const wrapper = ref(null)
const steps = [
{
attachTo: { element: '#feature-1' },
content: { title: 'Welcome!', description: 'Let me show you around.' }
},
{
attachTo: { element: '#feature-2' },
content: { title: 'Next Feature', description: 'Here is another feature.' }
}
]
Start Tour
Feature 1
Feature 2
```
## Using Vue Template Refs
You can attach steps to elements using Vue template refs:
```vue
import { ref } from 'vue'
import { VOnboardingWrapper } from 'v-onboarding'
import 'v-onboarding/dist/style.css'
const wrapper = ref(null)
const buttonRef = ref(null)
const steps = [
{
attachTo: { element: buttonRef },
content: { title: 'Click me!', description: 'This button uses a template ref.' }
}
]
Start Tour
```
## Custom Step UI
Use the default slot to create your own step UI:
```vue
{{ step.content.title }}
{{ step.content.description }}
Back
{{ isLast ? 'Finish' : 'Next' }}
```
## Styling
Customize the overlay and tooltips with CSS variables:
```css
:root {
--v-onboarding-overlay-z: 10;
--v-onboarding-step-z: 20;
/* SVG Overlay */
--v-onboarding-overlay-fill: rgba(0, 0, 0, 0.75);
/* Tooltip */
--v-onboarding-step-arrow-background: white;
}
```
## Documentation
For full documentation including all props, events, hooks, and examples, visit the [documentation site](https://v-onboarding-docs.fatihsolhan.com/).
## License
MIT