Description:
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:
v1.1.1 (04/29/2022)
- Bug Fixes
v1.0.2 (03/22/2022)
- Update
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