v-onboarding
v-onboarding is a super-slim, fully-typed onboarding plugin for Vue 3
Installation • Usage • Props • Slots • Exposed Methods
Demo
Installation
npm
npm install v-onboarding
Yarn
yarn add v-onboarding
Usage
<template> <VOnboardingWrapper ref="wrapper" :steps="steps" /> <div> <button id="foo">Updatebutton> div> template> <script> import { defineComponent, ref, onMounted } from 'vue' import { VOnboardingWrapper } from 'v-onboarding' import 'v-onboarding/dist/style.css' export default defineComponent ({ components: { VOnboardingWrapper }, setup() { const wrapper = ref(null) const steps = [ { attachTo: { el: '#foo' }, content: { title: "Welcome!", description: "You can use this button update your informations" } } ] onMounted(() => { if (wrapper.value) { wrapper.value.start() } }) return { wrapper, steps } } }) script>
Props
steps
| Name | Type | Description |
|---|---|---|
steps |
Step[] | Required. Onboarding steps |
document.querySelector("#foo") classList: ["attached", "bar"] // optional. Default: [] }, content: { // optional title: "..." description: "" // optional }, on: { // optional before: function() {}, // optional (could be async) after: function() {} // optional (could be async) }, options: {} // [Options](#options) } ]">
[ { attachTo: { element: "#foo" // or () => document.querySelector("#foo") classList: ["attached", "bar"] // optional. Default: [] }, content: { // optional title: "..." description: "" // optional }, on: { // optional before: function() {}, // optional (could be async) after: function() {} // optional (could be async) }, options: {} // [Options](#options) } ]
options
| Name | Type | Description | Default |
|---|---|---|---|
options |
Object | Optional. Onboarding options | Default Options |
{
popper: {} // PopperJS options: https://popper.js.org/docs/v2/constructors/#options,
disableOverlay: boolean,
scrollToStep: {
enabled: boolean,
options: {} // scrollIntoViewOptions: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
}
}
Default Options
{
popper: {
modifiers: [
{
name: "offset",
options: {
offset: [0, 10],
},
}
]
},
disableOverlay: false,
scrollToStep: {
enabled: true,
options: {
behavior: 'smooth',
block: 'center',
inline: 'center'
}
}
}
- Note that you can override these options in each step
Slots
default
{{ step.content.title }}
{{ step.content.description }}
<template>
<VOnboardingWrapper ref="wrapper" :steps="steps">
<template #default="{ previous, next, step, exit, isFirst, isLast, index }">
<VOnboardingStep>
<div class="flex flex-col p-5">
<div class="flex flex-col bg-white shadow-md p-4 rounded">
<h3 class="font-medium text-xl">{{ step.content.title }}h3>
<p v-if="step.content.description" class="text-sm">{{ step.content.description }}p>
<div class="flex items-center space-x-2 mt-4">
<button v-if="!isFirst" @click="prev" class="flex flex-1 items-center justify-center px-2 py-1 rounded-sm text-gray-600 border-2 border-gray-600 hover:text-white hover:bg-gray-600 duration-200">Previousbutton>
<button @click="next" class="flex flex-1 items-center justify-center px-2 py-1 rounded-sm text-indigo-600 border-2 border-indigo-600 hover:text-white hover:bg-indigo-600 duration-200">{{ isLast ? 'Finish' : 'Next' }}button>
div>
div>
div>
VOnboardingStep>
<template>
VOnboardingWrapper>
template>
<script>
import { defineComponent } from 'vue'
import { VOnboardingWrapper, VOnboardingStep } from 'v-onboarding'
import 'v-onboarding/dist/style.css'
export default defineComponent({
components: {
VOnboardingWrapper,
VOnboardingStep
},
setup() {
// ...
}
})
script>
Exposed Methods
These methods can be accessed through component ref
Example
"><template> <VOnboardingWrapper ref="wrapper"/> template> <script> import { defineComponent, ref, onMounted } from 'vue' import { VOnboardingWrapper } from 'v-onboarding' import 'v-onboarding/dist/style.css' export default defineComponent({ components: { VOnboardingWrapper }, setup() { const wrapper = ref(null) onMounted(() => { if (wrapper.value) { wrapper.value.start() // here } }) return { wrapper } } }) script>
| Name | Usage | Description |
|---|---|---|
start |
start() |
Starts the onboarding |
finish |
finish() |
Finishes the onboarding |
goToStep |
goToStep(2) or goToStep(current => current + 1) |
Moves to the specified step number |
Roadmap
- Write tests
5 Jul 30, 2022
3 Apr 29, 2022
9 Jan 24, 2023
0 Oct 27, 2021
0 Dec 28, 2021
0 May 5, 2022
16 Jan 4, 2023
8 Jul 31, 2022
4 Nov 18, 2022
3 Dec 15, 2022
5 Dec 7, 2022
33 Jul 9, 2021
30 Sep 3, 2022
86 Dec 24, 2022
2 Dec 12, 2022
3.7k Jan 6, 2023
0 Jan 1, 2022
2 Sep 28, 2022
8 Oct 1, 2022