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