A super-slim, highly customizable, fully-typed onboarding plugin that helps guide your visitors through your application.
How to use it:
1. Import and register the onboarding plugin.
import { defineComponent, ref, onMounted } from 'vue' import { VOnboardingWrapper } from 'v-onboarding' import 'v-onboarding/dist/style.css'
export default defineComponent ({ components: { VOnboardingWrapper }, // ... })
2. Add the VOnboardingWrapper component to the template and define your own steps as follows:
<template> <VOnboardingWrapper ref="wrapper" :steps="steps" /> <div> <button id="example">Start</button> </div> </template>
export default defineComponent ({ components: { VOnboardingWrapper }, setup() { const wrapper = ref(null) const steps = [ { attachTo: { el: '#example' }, content: { title: "Step 1", description: "This is step 1" }, on: { // callbacks before: function() {}, after: function() {} }, options: {} // options } ] onMounted(() => { if (wrapper.value) { wrapper.value.start() } }) return { wrapper, steps } } })
3. Available step options.
{ popper: { modifiers: [ { name: "offset", options: { offset: [0, 10], }, } ] }, disableOverlay: false, scrollToStep: { enabled: true, options: { behavior: 'smooth', block: 'center', inline: 'center' } } }
4. API methods.
// start start(); // finish finish() // go to a specific step goToStep(3) goToStep(current => current + 1);
Preview:
Changelog:
v2.5.1 (05/21/2023)
- bugfixes
v2.4.0 (05/09/2023)
- added new dynamic CSS variables
v2.3.2 (04/24/2023)
- fixed an issue that step wasn’t get attached to correct element
v2.3.1 (02/22/2023)
- vonboardingstep.vue: removed misplaced attribute
v2.3.0 (02/19/2023)
- Separated finish and exit events. exposed exit method
- Bug Fixes
v2.2.1 (12/11/2022)
- fixed an issue that exit event wasn’t being emitted when onboarding finished with Finish button
v2.2.0 (11/13/2022)
- New configuration options
v2.1.0 (08/28/2022)
- add an option to provide button labels for the default UI
v2.0.1 (08/01/2022)
- usesvgoverlay.ts: fixed multiple event listener issue
v2.0.0 (07/23/2022)
- feat: added padding and borderRadius options to overlay element
v1.2.3 (07/02/2022)
- vonboardingstep.vue: fixed an issue where finish button was throwing an error on the last step
Download Details:
Author: fatihsolhan
Live Demo: https://v-onboarding.fatihsolhan.com/
Download Link: https://github.com/fatihsolhan/v-onboarding/archive/refs/heads/main.zip
Official Website: https://github.com/fatihsolhan/v-onboarding
Install & Download:
# Yarn
$ yarn add v-onboarding
# NPM
$ npm i v-onboarding