fatihsolhan/v-onboarding

v-onboarding is a super-slim, fully-typed onboarding component for Vue 3

Hello, I'm Fatih! 👋

I'm a Fullstack Engineer (Frontend Heavy), specializing in the development of efficient, user-centric digital solutions. My experience ranges from JavaScript to CMS systems, always aiming for optimal performance and user experience. I am continuously learning and staying ahead with the latest industry trends and technologies.

🎯 Skills

• Programming Languages: JavaScript, TypeScript
• Frontend Technologies: React.js, Next.js, Vue.js, Nuxt.js, CSS (including various frameworks)
• Backend Technologies: Node.js
• CMS Systems: Keystone, Directus, Strapi, Wordpress

💼 Current Role

Leading the charge in the creation and maintenance of state-of-the-art frontend architectures for a variety of projects, utilizing the most recent technologies and frameworks. Quality front-end design and functionality is always my priority.

🌱 Learning and Growth

Constantly refining my understanding of JavaScript and TypeScript, exploring new features, design patterns, and best practices. Prioritizing user experience and consistently seeking to enhance frontend capabilities.

🎙️ Public Speaking

An accomplished speaker on complex topics in the JavaScript ecosystem, notably on the JavaScript Event Loop, demonstrating a deep understanding of the language.

📦 Open-Source Contributions

Among my contributions to the open-source world is the v-onboarding package - a fully-typed, customizable onboarding component for Vue 3, designed to simplify the onboarding process in applications.

🤝 Connect With Me

You can connect with me on Twitter @fatihsolhann or via LinkedIn. I'm always open to discussing new projects, innovative ideas, or ways to add value to your team.

v-onboarding's Issues

Restart doesn't work after finish

Describe the bug
After finishing/closing onboarding doesn't work restarting onboarding

To Reproduce
Steps to reproduce the behavior:

1. start onboaring
2. go to the last step and press finish onboaring || just close onboarding at any step
3. сlick on start again
4. onboarding Poppers doesn't open

Here is the link where the problem is reproduced.
Or in the library demo https://v-onboarding.fatihsolhan.com/

Also, there is a Warning in the console

ty!

Steps attaching to previous step's element

Hi,

I'm trying to get v-onboarding working, and I've come across a strange issue. When I start the onboarding, it looks fine, but when I click 'next' the next step appears correctly, but still attached to the same element as the first step. However, when I click previous, now the first step appears, but now attached to the element for the second step.

Click start (should be attached to test this, which it is):

click next (should be attached to test that, which it isn't):

click previous (should be attached to test this, which it isn't):

It seems to me that the attachment is happening before the step is updated, or something similar...

Here's the relevant HTML:

            <!-- Add the Onboarding -->
            <div id="onboarding">
                    <on-boarding></on-boarding>
                <div id="testa">test this</div>
                <div id="testb">test that</div>
            </div>

And here's my whole OnBoarding Vue component:

<template>
  <div>


    <VOnboardingWrapper ref="wrapper" :steps="steps">
      <template #default="{ previous, next, step,exit, isFirst, isLast, index }">
        <VOnboardingStep>
          <div class="bg-white shadow-lg sm:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="sm:flex sm:items-center sm:justify-between">
                <div v-if="step.content">
                  <h3 v-if="step.content.title" class="text-lg font-medium leading-6 text-gray-900">{{ step.content.title }}</h3><i @click="exit" class="cursor-pointer mt-icon-closewindow" />
                  <div v-if="step.content.description" class="mt-2 max-w-xl text-sm text-gray-500">
                    <p>{{ step.content.description }}</p>
                  </div>
                </div>
                <div class="mt-5 space-x-4 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center relative">
                  <span class="absolute right-0 bottom-full mb-2 mr-2 text-gray-600 font-medium text-xs">{{ `${index + 1}/${steps.length}` }}</span>
                  <template v-if="!isFirst">
                    <button @click="previous" type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-cgSecondary px-4 py-2 font-medium text-white hover:brightness-75 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:text-sm">Previous</button>
                  </template>
                  <button @click="next" type="button" class="inline-flex items-center rounded-md border border-transparent bg-cgPrimary px-4 py-2 font-medium text-white shadow-sm hover:brightness-75 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm">{{ isLast ? 'Finish' : 'Next' }}</button>
                  
                </div>
              </div>
            </div>
          </div>
        </VOnboardingStep>
      </template>
    </VOnboardingWrapper>
    <span id="foo">Howdy, My Friend!</span>
    <button id="bar">Click me for no reason</button>
    <button @click="() => goToStep(1)">Click to go second step</button>
    <div>
      <button @click="start">Start Onboarding</button>
      <button @click="finish">Finish Onboarding</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { VOnboardingWrapper, VOnboardingStep, useVOnboarding } from 'v-onboarding'
export default defineComponent ({
  components: {
    VOnboardingWrapper,
    VOnboardingStep
  },
  setup() {
    const wrapper = ref(null)
    const { start, goToStep, finish } = useVOnboarding(wrapper)
    const steps = [
    {
        attachTo: { element: '#testa' },
        content: { title: "Step1!"
          // description: "This is a quick tutorial to help you get started with creating your own website."
        },
        options: {
          scrollToStep: {
          enabled: false,
          options: {
            behavior: 'smooth',
            block: 'start',
            inline: 'start'
          }
        }
        }
      },
      {
        attachTo: { element: '#testb' },
        content: { title: "Step 2",
          // description: "You can choose from a variety of templates to get started with your website."
        },
        options: {
          scrollToStep: {
          enabled: false,
          options: {
            behavior: 'smooth',
            block: 'start',
            inline: 'start'
          }
        }
        }
      }
    ]
    
    // onMounted(() => {
    //   console.log("thiss")
    //   finish()
    //   start()
    // })

    return {
      wrapper,
      steps,
      start,
      finish,
      goToStep
    }
  }
})
</script>
<style>
[data-v-onboarding-wrapper] [data-popper-arrow]::before {
  content: '';
  background: var(--v-onboarding-step-arrow-background, white);
  top: 0;
  left: 0;
  transition: transform 0.2s ease-out,visibility 0.2s ease-out;
  visibility: visible;
  transform: translateX(0px) rotate(45deg);
  transform-origin: center;
  width: var(--v-onboarding-step-arrow-size, 10px);
  height: var(--v-onboarding-step-arrow-size, 10px);
  position: absolute;
  z-index: -2;
  
}

[data-v-onboarding-wrapper] [data-popper-placement^='top'] > [data-popper-arrow] {
  bottom: 5px;
}

[data-v-onboarding-wrapper] [data-popper-placement^='right'] > [data-popper-arrow] {
  left: -4px;
}

[data-v-onboarding-wrapper] [data-popper-placement^='bottom'] > [data-popper-arrow] {
  top: -4px;
}

[data-v-onboarding-wrapper] [data-popper-placement^='left'] > [data-popper-arrow] {
  right: -4px;
}
:root {
  --v-onboarding-overlay-z: 40;
}

:root {
  --v-onboarding-step-z: 50;
}
</style>

Slide Hooks: Before & After

The Problem:
I have a page with records in a table, this page has a button which opens a modal, the modal allows you to create a new record. I would like my users to know how to create the records.

Thoughts on a solution
Could we somehow introduce "before" and "after" hooks for each "slide", just functions that run before and after each slide is loaded on the Dom.

Slide one says "this opens the modal"
Slide 2 Before: perform "modal.open()"
(modal opens)
Slide 2 says "Enter the record name"
Slide 3 says click Submit
(I don't actually want to submit anything)
Slide 3 After: "modal.close()"
Slide 4 Results are shown in this table

Not entirely sure how this works in reverse as I write it, maybe it needs to be on the next/previous beforeNext beforePrevious?

Then when going in reverse I could say beforePrevious and perform the modal.open() again.

Additional context
I completely understand if this over complicates the library, but would be interesting to hear additional thoughts from others. 🙂

I just think it adds a bit more flexibility for things like interactive systems.

If I get the chance, I'll have a think of a solution and send a PR, but sounds like y'all have a good grasp on the library and where to take it. 🚀

Prevent click through overlay

pointer-events: none; seems not to work with svg.

Missing "./src/types/StepEntity" export in "v-onboarding" package

Describe the bug
I'm receiving the error Missing "./src/types/StepEntity" export in "v-onboarding" package when starting local development server.

To Reproduce
Steps to reproduce the behavior:

1. Use latest v.2.0.0 version of this library
2. Add import type { StepEntity } from 'v-onboarding/src/types/StepEntity' to .ts file
3. Start local Vite dev server
4. Error appears during local startup

Additional context
I don't believe this error occurred with the previous version of this library, was the StepEntity type export changed?

exit / finish emits required

Hi, there is an emit for "exit". But why not for "finish"?

As example: When I click the "X" button on top right of my onboarding, it executes the @EXIT=".." emit. But when the last step has been reached, there is a "Finish" button which executes as well the @EXIT=".." emit. But it should emit a @finish=".." function.

The reason for this is, I'm trying to seperate a cancel / finish function to save the state in my database. Now I have to write a complex condition to check if it's finished or has been exited manually by user. :/

Thanks!

Exit or next can't work correctly when being last step with custom ui

Describe the bug
Hi, in the custom ui tutorial (https://v-onboarding-docs.fatihsolhan.com/examples/custom-ui)
the next function works fine when being not the last step
but when being the last step and click finish, there will be an error:

To Reproduce (template code)

  <VOnboardingWrapper ref="wrapper" :steps="steps">
		<template
			#default="{
				previous,
				next,
				step,
				exit,
				isFirst,
				isLast,
				index,
			}"
		>
			<VOnboardingStep>
				<div class="bg-white shadow sm:rounded-lg">
					<div>
						<div v-if="step.content">
							<p>{{ step.content.title }}</p>
						</div>
						<div v-if="step.content.description">
							<p>{{ step.content.description }}</p>
						</div>
						<div>
							<template v-if="!isFirst">
								<ElButton @click="previous">
									Previous
								</ElButton>
							</template>
							<template v-if="!isLast">
								<ElButton @click="next"> Next </ElButton>
							</template>
							<template v-else>
								<ElButton @click="next"> Finish </ElButton>
							</template>
						</div>
					</div>
				</div>
			</VOnboardingStep>
		</template>
	</VOnboardingWrapper>

To Reproduce (typescript + vue3 composition api code)

  <script setup lang="ts">
  import {
      VOnboardingWrapper,
      VOnboardingStep,
      useVOnboarding,
  } from 'v-onboarding'
  
  const wrapper = ref(null)
  const { start, goToStep, finish } = useVOnboarding(wrapper)
  const steps = [
      {
	      attachTo: { element: '#foo' },
	      content: { title: 'Welcome!' },
      },
      {
	      attachTo: { element: '#bar' },
	      content: {
		      title: 'Do it!',
		      description: 'hi',
	      },
      },
  ]
  </script>

Desktop (please complete the following information):
OS:
macOS
Browser chrome
Version 103

Thanks!

Can this be used for Vue 2?

Can this be used for Vue 2?

Rectangular highlight area is offset from the target element

Describe the bug
The white "gap" in the overlay that is supposed to highlight the element being described by a step is offset horizontally and vertically.
The Popper dialog is correctly positioned w.r.t. the element.

To Reproduce
Steps to reproduce the behavior:

1. Use this document structure:

...

...

... ...

body {
height: 100vh;
}
div#mainPanel {
height: 100%;
margin-left: 160px;
}
div.navbar {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}

Expected behavior
I'd like the target element to be highlighted, it is greyed out by the overlay instead.
The white rectangle seems to be offset by the width of the sidebar, and by the height of the fixed navbar.

Trying absolute or fixed Popper strategies didn't help - in fact I don't even think that Popper is responsible for placing that rectangle?

Add delay and hide / autoHide

on.beforeStep should be executed normally, the step should only be displayed after the delay.

example

const steps = [
  {
    attachTo: { element: '#id1' },
    content: { title: 'Title 1'  },
    hide: true // defaults to true, hides the step when the next step has a delay
  },
  {
    delay: 2000,
    attachTo: { element: '#id2' },
    content: { title: 'Title 2'  },
  }

On start it shows step 1, click next, it hides the current step 1, cause step 2 has a delay.
Step 2 on.beforeStep is executed (e.g. do things like open a navigation with animation).
After 2000 miliseconds step 2 appears.

Directly go to / jump to step

Is your feature request related to a problem? Please describe.
I have to add steps that only exist under specific conditions.

Describe the solution you'd like
Add a way to jump directly to a step instead of the "next" one, for example using goto

Describe alternatives you've considered
Have the option to split the path in two ways (if this, go to step 3a otherwise go to step 3b)

Module '"v-onboarding"' has no exported member 'useVOnboarding'.ts(2305)

Possible to style highlighted element?

Is your feature request related to a problem? Please describe.
I've been unable to figure out a way to style the highlighted element from either the docs or looking through the rendered DOM.

Describe the solution you'd like
The ability to style the highlighted element (I'm looking to add simple things such as padding and rounded corners).

Describe alternatives you've considered
I've looked through the docs as well as what is being rendered in the DOM.

Additional context

afterStep not working

Hi, I'm try to use this project in my app. I am using this docs to implement the feature. But when i want to save the onboarding progress to my server using on: { afterStep: () => {}} in steps props, the code cannot be executed, but the beforeStep is working fine. Could you help me?

Change close button title / icon

Hi again, it would be great if we could somehow change the closing buttons title or content. As currently there is an SVG which is fine enough - but I'd like to modify the buttons class to set some bootstrap classes like "btn-primary btn-sm" which would give it some colors and style.

Also I'd like to place myself the content instead of SVG I would love to use the char "X" as inner value. It would be much better if we could also put some HTML inside like "" to integrate font awesome icons into the close button.

This would improve the entire behaviour as I'd have to hardcode it now and that's not a proper solution. We're planning to use this within a big spread and great platform for real estate rentals and leasing in germany - so we have to stick to some professional solutions instead of hardcoding anything.

Thanks mate! Hope to hear from you soon! :)

V-HTML

Plese use v-html for view content description or title it's people needed it;
<3<3

Before and After functions doesn't work

Describe the bug
I have some steps and want to execute a function on last step. I use example from documentation, but it doesn't work. I tried to add a log to "before" function, but have the same result.

To Reproduce
Steps to reproduce the behavior:

1. Copy example from documentation.
2. Add some logic (or simple console.log("xxx))
3. Check console.

Expected behavior
I expected that after (or before) executing a step I can add some logic (ex: go to another page).

Screenshots

Desktop (please complete the following information):

• OS: [Windows]
• Browser [chrome]
• Version [22]

Add indicator for previous click

on.beforeStep should get an argument, that indicates if previous button was clicked.

Tried changing button titles - nothing happened

Hi, I don't know if it's my bad now or not, but I've tried changing the button titles as in the documentation using the labels object.

Here's my code snippet which should change the button title for this step:

The button title for the next button with value "Irgendwas" doesn't apply - did I do something wrong?

Another misunderstood case is the overriding of the OnboardingWrapper. Where should I pass the options to change the button titles globally? The documentation is somehow lacking here with samples. :(

Another idea: Could you let us integrate images / assets into the steps? So we could also show some illustrations with the steps. That would be great!

Thanks for your effort again - this plugin has still huge potential as other alternatives are really bad tho and this one works really cool so far. :)

[vite] Internal server error: Missing "./dist/style.css"

[vite] Internal server error: Missing "./dist/style.css" export in "v-onboarding" package
Plugin: vite:import-analysis

Change button titles

Hi, I really love this plugin. Could you please add props to change the buttons titles like "Next", "Previous" and "Finish"? :)
And maybe a slot to change the close icon?

That would save me the time to manually create a new popover template instead of using popper and the defaults which are pretty good and easy to re-design and customize.

I'd like to translate the buttons into german. I think this shouldn't be a big deal and can be very fast changed. Thanks! :D

Inaccessible panel — Off the bottom of the screen

Describe the bug
I have a large panel that displays a graph.
I would like to explain this graph to my users.

The issue occurs when I reach the step that wraps my #page-block-graph element.
Due to my screen size, the panel goes off the bottom of the screen and is inaccessible to read.

To Reproduce

• Create some page items to push our steppable item down to the bottom of the page, with space above it.
• Create an element with a height of 90vh (I am not using this size, but this helps show the issue at any screen size).
• Add a step attached to your VH'd element with a title, and desc that spans 4 lines.

Expected behavior
If the space between the current selection, and the bottom of the entire page is less than the height of the details step, it should appear in the other direction (appear above).

I would imagine this might also be a problem at the top, where the logic should be reversed.

Screenshots

Desktop (please complete the following information):

• Chrome & Edge

Could not find a declaration file for module 'v-onboarding'

Describe the bug
Error TS7016 on the import line
import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding'

Could not find a declaration file for module 'v-onboarding'. 
'..../node_modules/v-onboarding/dist/v-onboarding.es.js' implicitly has an 'any' type.
  There are types at '..../node_modules/v-onboarding/dist/index.d.ts', 
but this result could not be resolved when respecting package.json "exports". 
The 'v-onboarding' library may need to update its package.json or typings.ts(7016)

vue__WEBPACK_IMPORTED_MODULE_1__.createElementVNode) is not a function

Describe the bug
Followed instruction from basic example, started app, crashed

Expected behavior
not to crash

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: 122.0.6261.96

toRefs expects a reactive object but received a plain one

Describe the bug
The onboarding tour is not starting because of this warning: "toRefs() expects a reactive object but received a plain one."

To Reproduce
Steps to reproduce the behavior:

1. Vue Version 3.3.0
2. install and setup like in documentation
3. See warning

Expected behavior
The tour should start.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Win10]
• Browser [e.g. chrome, brave]

Attributes as selector

Is it possible to target the attribute instead of the element?
For example: i have this html; <span data-test-id="chart-title" class="text-md md:text-xl">Manage Products</span>
I want to target the date-test-id instead of the classes which prone to break when refactoring. Thanks

Overlay doesnt cover screen when css attribute zoom < 1 is applied on parent

The current solution of masking the current target using svg mask has some drawbacks - It doesnt account for any zoom applied to a parent element, and it also does not seem to account for border radius.

An alternative solution is to use background with opacity and then apply z-index and position:relative to the target. (Should probably do a check to see if the target already has a position-property where z-index can be applied, and also cleanup when leaving the step.)
Example of the visual bug (and POC of alternative solution):
https://stackblitz.com/edit/vitejs-vite-krz7l2?file=src%2Fcomponents%2FOnboarding.vue

Uncaught TypeError: _a.start is not a function

TypeError: Cannot destructure property 'previous' of 'undefined' as it is undefined.

Vue app is crashing. Uncaught TypeError: Object(...) is not a function

Describe the bug
Vue app is crashing due to this error.

v-onboarding.es.js:903  Uncaught TypeError: Object(...) is not a function
    at Module.eval (v-onboarding.es.js:903:1)
    at eval (v-onboarding.es.js:1148:30)
    at ./node_modules/v-onboarding/dist/v-onboarding.es.js (chunk-vendors.js:30600:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js?!./src/modules/home/entityCard/views/EntityCardNegotiation.vue?vue&type=script&lang=ts:63:71)
    at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js?!./src/modules/home/entityCard/views/EntityCardNegotiation.vue?vue&type=script&lang=ts (app.js:12339:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (EntityCardNegotiation.vue:1:1)

To Reproduce
Steps to reproduce the behavior:

1. Install npm install v-onboarding
2. Follow instructions for basic example
3. See error in console.

Expected behavior
App should not crash.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Edge
• Version: 119

onFinish emit

I want to switch onboarding between pages. Actually all I need is to get an emit when the Finish button is clicked. I'm sorry if it's available in your product and I didn't notice it, but I'm writing this feature request because I can't see it in the source code.
Thank you for your time

Close Button Event - OnClosed

Hi, I'm requesting here a simple integration to provide an event which fires once I click on the close button. It would be great if there would be a option to define a prompt to ask if the user really wants to close the guide instead of directly closing it.

I'd love to integrate this to set a cookie on his browser to hide the guide once he reloads / visits our page again. As well in the backend I will save it so it will never ever show again.

So if he closes the guide accidently, it can't be recovered as it's hidden from now. So it would be great to ask for his permission to really close it or to cancel the closing.

I hope you understood my request. Even though if the prompt is a big deal - no doubts - it would be good enough to have an event which fires once I click the close button - that's all I need.

Thanks again for your effort. Let's make this plugin more great as it already is! :)

A11y issue - focus should move to the onboarding card when start() is called

Describe the bug
This is an accessibility issue.

issue 1:
For a user who is not able to use a mouse, they navigate around the page using the tab key to focus on different elements. This doesn't work well. This also happens when clicking next or back.

issue 2:
Another note, focus should be trapped within the onboarding item once focus is established in there.

To Reproduce
issue 1:
Once start() is called, focus should be moved to inside the onboarding item, this is not the case. Currently, start() is called, but the focus is not moved, making it so this user has to hit tab many times, first focusing on every element on the page before focus is transferred to the onboarding item.

issue 2:
Say for example, if I have a close button, back button, and a next button:

• say we have focus on close
• hit tab
• now focus is on back
• hit tab
• now focus is on next,
• hit tab
• focus goes to the rest of the web page

Expected behavior

issue 1:
Focus should be transferred to the onboarding item when next, back, or start() is called.

issue 2:
Focus should be trapped in the onboarding item

• say we have focus on close
• hit tab
• now focus is on back
• hit tab
• now focus is on next,
• hit tab
• focus should go back to close

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: mac
• Browser: chrome
• Version: package version 2.6.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

afterStep not being dispatched with custom ui

Describe the bug
Hi! here I am again 😅

the after step seems not being dispatched:

      on: {
        afterStep: function () {
          alert('testing')
        },
      },

To Reproduce
Steps to reproduce the behavior:

• use the custom ui https://v-onboarding-docs.fatihsolhan.com/examples/custom-ui
• create one or more steps with on.afterStep

  const steps = [
    {
      attachTo: { element: '#create_quest_button' },
      content: {
        title: trans('Create quest'),
        description: trans('If you want to create a task for others to do, click on Create quest'),
      },
      on: {
        afterStep: function () {
          alert('testing')
        },
      },
      options: {
        popper: {
          modifiers: [
            {
              name: 'offset',
              options: {
                offset: [10, 20],
              },
            },
          ],
        },
      },
    },
  ]

Desktop (please complete the following information):

• OS: macOS
• Browser chrome
• Version 102

Exit emit doesnt working

I called exit emit like below.
<VOnboardingWrapper ref="wrapper" :steps="steps" :options="options" @EXIT="onExit"/>

const onExit = () => {
console.log('onexit');
};

But emit doesnt call onExit method.

Could you add in the docs an example with an arrow?

Is your feature request related to a problem? Please describe.

I've followed the popper docs https://popper.js.org/docs/v2/modifiers/arrow/, I'm trying with your custom UI example https://v-onboarding-docs.fatihsolhan.com/examples/custom-ui, but the arrow never appears.

That's my custom step:

  const steps = [
    {
      attachTo: { element: '#create_quest_button' },
      content: { title: 'Welcome!' },
      options: {
        popper: {
          modifiers: [
            {
              name: 'arrow',
              options: {
                padding: 5,
              },
            },
            {
              name: 'offset',
              options: {
                offset: [10, 20],
              },
            },
          ],
        },
      },
    },
  ]

Describe the solution you'd like
If possible, an example using arrow in the docs

Netlify build error: "Cannot find module '@popperjs/core/lib/createPopper'"

Describe the bug
When attempting to push a new build using this library, I receive the error:

2:14:16 PM: node_modules/v-onboarding/src/types/VOnboardingWrapper.ts(1,35): error TS2307: Cannot find module '@popperjs/core/lib/createPopper' or its corresponding type declarations.

To Reproduce
Steps to reproduce the behavior:

Expected behavior
I expect the build to not fail.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS 12.4 Monterrey
• Browser Safari
• Version 15.5

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Does @popperjs/core need to be installed as a dependency?

expected hoisted manifest

yarn lock delete and yarn install

error An unexpected error occurred: "expected hoisted manifest for "v-onboarding#vue#@vue/server-renderer#@vue/compiler-ssr"".

Yarn version: 
  1.22.17

Node version: 
  16.13.2

Platform: 
  linux x64

Trace: 
  Invariant Violation: expected hoisted manifest for "v-onboarding#vue#@vue/server-renderer#@vue/compiler-ssr"
      at invariant (/usr/share/yarn/lib/cli.js:2314:15)
      at _loop2 (/usr/share/yarn/lib/cli.js:95100:9)
      at PackageHoister.init (/usr/share/yarn/lib/cli.js:95170:19)
      at PackageLinker.getFlatHoistedTree (/usr/share/yarn/lib/cli.js:48922:20)
      at PackageLinker.<anonymous> (/usr/share/yarn/lib/cli.js:48933:27)
      at Generator.next (<anonymous>)
      at step (/usr/share/yarn/lib/cli.js:310:30)
      at /usr/share/yarn/lib/cli.js:328:14
      at new Promise (<anonymous>)
      at new F (/usr/share/yarn/lib/cli.js:5301:28)

Could not find a declaration file for module 'v-onboarding'

Describe the bug
Types are not available when using the library. Running a build errors out with:

error TS7016: Could not find a declaration file for module 'v-onboarding'. './node_modules/v-onboarding/dist/v-onboarding.es.js' implicitly has an 'any' type.

There are types at './node_modules/v-onboarding/src/typings.d.ts', but this result could not be resolved when respecting package.json "exports". The 'v-onboarding' library may need to update its package.json or typings.

1 import { VOnboardingWrapperOptions } from 'v-onboarding';

To Reproduce
Steps to reproduce the behavior:

1. Import v-onboarding and use as normal
2. Run a build
3. Observe typescript errors

Expected behavior
Types be exported from the library and for TS to detect them and build successfully.

Versions

• OS: MacOS 14.2.1
• Node: 20.1.0
• Typescript: 5.3.3
• v-onboarding: 2.8.0
• Vue: 3.4.21
• Vite: 5.0.12

TS Config

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

Clicking 'X' is emitting, but not closing.

Upon clicking X on the popover, the tool does not close as expected.
Pressing 'Finish' at the end works just fine.

I would expect clicking 'X' to close the onboard.

Versions:
Vue: 3
Oboarding: v2.4.0

Allow to translate buttons text

Is your feature request related to a problem? Please describe.
I'm creating a website in french, so I need buttons in french

Describe the solution you'd like
Either translations should be embedded in the npm package, or there should be a way to pass the buttons labels in the options.

Describe alternatives you've considered
Overriding the template, which is a tedious task, just to change a button label.

Dialog placement

When an element div is found the placement of the v-onboarding dialog is on top of the element, but when I go to the next step and go back to the previous step the v-onboarding dialog is on the bottom of the element div, how do I force the placement position on one specific step? I tried the popper config in the step, but can't get this to work ..