Vue Tour is a lightweight, simple, and customizable plugin designed to guide users through applications built with Vue.js. It allows developers to create interactive, step-by-step tours by targeting specific DOM elements. The current stable version is 2.0.0, which was released recently and includes a significant update to Popper.js v2.x for positioning. While not on a strict release cadence, the project shows active development with features like sticky steps, promise-based `before` hooks for async operations, and element highlighting introduced in previous minor versions. Its primary differentiator is its simplicity and direct integration with Vue's reactivity system, making it a straightforward choice for adding onboarding or feature discovery flows without heavy dependencies, utilizing standard CSS selectors for targeting tour steps.
npm install vue-tourVerified import paths — ran on the pinned version, not inferred.
Demonstrates the basic setup of Vue Tour in a Vue.js application, including plugin registration and CSS import.
Review the Popper.js v2.x documentation for updated option names and structures. Adjust your `params` object within each tour step accordingly. For example, some 'placement' options might have changed or been reorganized.
Ensure the target element is rendered and available in the DOM before activating the tour step. If elements are conditionally rendered, use the `before` hook in the step to wait for the element or ensure its visibility. Use unique and stable selectors.
Always ensure the `before` function returns a Promise. Resolve the promise to allow the tour to proceed, and reject it to prevent advancement. For synchronous operations, use `Promise.resolve()`.
Ensure `import 'vue-tour/dist/vue-tour.css';` is present in your main application entry file (e.g., `main.js`/`main.ts`). Check your build configuration to confirm CSS files are handled by appropriate loaders (e.g., `vue-style-loader`, `css-loader`). Avoid scope conflicts if using `<style scoped>` extensively.
Verify that `<v-tour name="myTour" :steps="steps"></v-tour>` is present in your template and that the `name` prop (e.g., 'myTour') exactly matches the string used to access it via `this.$tours['myTour']`.
Consult the Popper.js v2.x documentation for the correct syntax and available options. Update the `params` object for each step to conform to the new Popper.js API.
Consider dynamically importing or rendering `<v-tour>` only on the client-side using a `<client-only>` wrapper in Nuxt.js or a similar mechanism in other SSR frameworks, or ensure all tour-related elements are fully mounted before hydration.