vue js guided tour

Existing customer? Sign in

5 Best Vue.js Product Tour Libraries for User Onboarding

Got software built on Vue.js and you need to improve your user onboarding? Dig into the best open-source libraries for the job. In our “vue”, these are some mighty fine tools.

Are you using Vue.js for your web application? Do you need to create an onboarding tour (or more!) for your product? If you’ve answered yes to both of those questions, you’ve come to the right place. 

User onboarding tours are a must for SaaS organizations that need to drive product adoption in-app. These powerful flows increase trial conversion, user retention, and also reduce churn rates. 

But it can be tricky to find tools to effectively launch onboarding flows on apps built with JS-based frameworks like Vue.js or React due to technical specifications. One unique thing about Vue.js is that it uses virtual DOMs.

Web apps built with Vue.js use a virtual representation of the DOM to make changes instead of directly changing the actual DOM. This allows apps built with Vue.js to be much faster, but it means that the onboarding solution has to be compatible with such a framework. 

This is why third-party onboarding libraries that are built to accommodate for Vue.js product tours could be better.

Five open-source Vue.js onboarding libraries #

If you’re looking to make DIY solutions, you can start with open-source libraries that are built as Vue.js components, with which you can create your own onboarding tours. These five below will give you a great grounding to build customized onboarding flows for your Vue.js app.

1. Intro.js #

Intro.js is a JavaScript library that allows developers to create user onboarding tours for various JavaScript-based apps ; that includes Vue.js. The library provides an easy-to-use interface for highlighting and describing specific elements on a web page and guiding users through a series of steps to complete a task. 

The library is customizable and can be styled to match the look and feel of the application. It's also lightweight and fast, making it an ideal solution for creating user onboarding experiences in Vue.js applications.

One caveat here though is that it’s not completely free. If you want to use it for commercial purposes, you need to purchase a license starting at $9.99 for lifetime use.

To use Intro.js for Vue.js, get the Vue bindings . 

Intro.js in action

2. Shepherd.js #

Shepherd.js is another JavaScript library that provides a highly customizable, and flexible set of UX patterns for building user onboarding tours in web applications. It is designed to work with a variety of JavaScript front-end frameworks, including Vue.js, and can be used to guide users through the key features and functionality of an application. 

The library includes a variety of features and options, such as the ability to add custom CSS for styling, use different types of modal windows, and set up tour triggers based on specific events. If you’re looking for a robust DIY solution for your Vue.js onboarding tour, this could be it. 

In order to use Shepherd.js for Vue.js, get the Vue Wrapper . 

Shepherd.js in action

3. Vue Tour #

Vue Tour is a Vue.js plugin for creating user onboarding tours in web applications. It provides a simple and intuitive interface for highlighting specific elements on a web page, describing what they do, and guiding users through a series of steps to complete a task. 

Like any onboarding library should be, the plugin is highly customizable, allowing developers to set up tour steps, add custom styles, and define triggers for starting the tour. It is also lightweight and fast, which is always a plus. 

You can get started with Vue Tour by installing via npm or downloading the GitHub build.

Vue Tour in action

4. v-onboarding #

v-onboarding is another Vue.js plugin for creating onboarding tours. It provides a minimal yet flexible interface for highlighting specific elements on a web page and guiding users. The UI is fully customizable and it supports TypeScript. 

You can install v-onboarding through npm or Yarn.

v-onboarding in action

5. Vue Page Guide #

Vue Page Guide is a component that allows you to create a visual guide for users. It’s quite similar to other Vue.js onboarding components, but unlike other tools, Vue Page Guide’s specialty seems to be in highlighting all features at once, like below. If this is something you prefer to do, check it out. 

Installation is similar to v-onboarding, through npm or Yarn .

Vue Page Guide in action

Want to save time from building onboarding? Buy instead!  #

If you don’t want to build your own onboarding tour for your Vue.js app, the other option is to buy dedicated, user onboarding software . 

There are pros and cons to both approaches. On one hand, if you do have dev resources to spare, and you want to have a customized onboarding experience that you can own and control, then building one from scratch with one of these open-source libraries might be the way to go.

Here's a brief table that summarizes it.

But even aside from saving dev time, buying onboarding software has many benefits when it comes to ROI. 

For instance, just look at all the features that Chameleon comes with other than its robust onboarding tools: 

Native A/B testing 

Fully customizable styling  

Integration with best-in-class analytics tools e.g. Mixpanel, Heap, Amplitude

Ability to contextually trigger tours and target users

Create self-serve onboarding flows

And most importantly, Chameleon is fully compatible with Vue.js. Installation is super easy, with a step-by-step guide that shows you how to get Chameleon up and running with npm . 

Interested? Try Chameleon for free and see for yourself! 

Deploy Vue.js product tours in minutes

Save dev time and easily build onboarding tours that drive product adoption.

You might also be interested in...

User Onboarding Metrics, KPIs, and Benchmarks: A Comprehensive Guide

User onboarding still isn't good enough, but here's how it's changing, product service management: bridging end users and product teams for growth.

Boost product adoption and reduce churn

Get started free in our sandbox or book a personalized call with our product experts

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Crafting product tours in Vue.js

Introduction

Product tours are used to familiarize new and existing users with the interface of your application and guide them towards taking meaningful actions that will help them utilize your application to its full potential.

In this article, I’ll walk you through how you can craft product tours that will help convert new users of your application into long-term users or customers.

Why use product tours?

All software, especially new products that are the first of their kind, often have a bit of a learning curve. As the product owner, your goal is to help shorten that curve by showing users how to efficiently use your product and its features. This can be done with the help of product tours.

Product tours also help with user retention and conversion, as most users who can’t navigate through the UI of your application will get frustrated and go on to use your competitors’ product instead.

Please note that product tours are not a substitute for a great user interface design, so it’s important to consider investing in high quality designs as well.

While product tours are a great tool, if poorly executed, they can quickly frustrate new users, preventing them from discovering your product’s core value and making them more likely to abandon your product too soon. The key is to focus on your product’s value and user goals, instead of dragging users through every feature. In this article, we’ll cover tips for designing effective product tours.

Best practices for creating product tours

Creating awesome product tours isn’t rocket science, but it does apply scientific principles in that you have to test and iterate on your tour multiple times to find out what is best for your users while following basic design principles. Let’s take a look at some useful tips, shall we?

Make it optional

Not every user likes to be lectured on how to use a product. Some of them learn by playing around with your user interface and figuring things out themselves, and forcing a product tour on them could make them less interested. For this reason, think about adding a “skip” button to your tour. Do note that there are cases where adding a product tour might be crucial, but this depends on your product type.

KISS (Keep It Short and Simple)

When creating product tours, don’t try to overcomplicate things. Not every new user is eager to use your products, so try to respect their time by keeping it short and simple.

You can achieve this by streamlining your product tour to contain only key steps the user needs in order to get acquainted with your product and get the most out of it.

Over 200k developers use LogRocket to create better digital experiences

Be sequential

Throwing around random highlights and tooltips isn’t the best way to show your users that you respect their time, and it can be confusing. Try your best to make your product tour follow a particular sequence instead. This will make your users eager to explore your product offerings.

Be suggestive

Most of the time, instead of showing your users all of your product’s features at once, you can simply suggest features they should try out or features they should know about after they’ve carried out a specific action or set. This encourages them to learn by self-discovery which is arguably one of the best methods of learning.

Provide value

Try to focus only on your product’s core offerings instead of boring your users with every little detail. The 80/20 principle can also be applied here in the sense that most of your users will only use 20 percent of your product’s features to achieve 80 percent of their needs. This means you should find out what that 20 percent of your product offering is and feature it in your tour.

Crafting product tours using vue-tour

There are tons of libraries we can use in crafting our product tours in Vue.js, but we’ll take a look at using the vue-tour library. vue-tour is the most widely used at 20,000 downloads weekly and 2,000 Github stars. It’s also easy to get it up and running and offers plenty of customizations.

To practice how we can craft product tours in Vue.js, we’ll take an existing dashboard application and add a product tour feature to it using the vue-tour library.

You can find the Github repository for crafting product tours with vue-tour here.

Please note that the repository has two branches: one is the main branch which is the initial, and the second is the product-tour branch, which is the final product.

Getting started

To get started, let’s fork the repository and clone it into our local machine.

Then we install node modules using the following command:

Next, we install the vue-tour library by running the command below:

Unfortunately, the vue-tour library isn’t yet compatible with Vue 3. This is being worked on and is going to be released by the project maintainers in an update coming soon, but for now, we’ll be using it with Vue 2.

In your main.js file add the following lines of code. This imports the vue-tour library, its default styling, and also specifies that we want to use the library globally in our application:

Working with vue-tour

First we have to add either a unique class name, ID name, or data property to the element we want our tour to target.

More great articles from LogRocket:

• Don't miss a moment with The Replay , a curated newsletter from LogRocket
• Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
• Use React's useEffect to optimize your application's performance
• Switch between multiple versions of Node
• Discover how to use the React children prop with TypeScript
• Explore creating a custom mouse cursor with CSS
• Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Navigate to DashboardHome.vue through src > views > dashboard > DashboardHome :

Next, we define the steps as an array of objects in our component’s data property, our Vuex store, or anywhere else.

Each of the array of objects should contain at least the target element, and the content you want in it. There’s also room to make some other customizations such as the placement of tooltip or header:

Adding the product tour to your project

Next, to make our product tour show up on our page, we add the following line of code:

The final step is to add the following line of code in our mounted hook, or whenever we want the tour to begin:

In our case, we want the tour to start when our user loads the page, so we load it in the mounted hook as shown below:

There we have it, our product tour is up and running. Obviously it isn’t anything fancy, but we’ve learned how to build one.

From here you can tweak and customize this project or your own product tours to whatever works best for you and your users.

For more information how to use and customize vue-tour check out their documentation here .

In this tutorial, we’ve reviewed the definition and importance of product tours. We’ve also discussed some of the best practices for creating really good product tours that help increase user conversion and retention. We’ve also practiced adding a product tour feature to our Vue.js application.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket .

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps — start monitoring for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

How to build a custom GPT: Step-by-step tutorial

Let’s see why and how to build custom GPTs — personalized versions of ChatGPT that act as custom chatbots to serve a specific purpose.

Jest adoption guide: Overview, examples, and alternatives

Jest is feature-rich testing framework that comes with several in-built features that make it powerful and easy to use.

Implementing LiveViews in Node.js

Explore LiveViewJS and how to build a full-stack Node.js app with LiveViews that supports real-time interactivity.

11 Planetscale alternatives with free tiers

Planetscale is getting rid of their free plan. Let’s explore 11 alternatives with free plans for backend and database operations.

Leave a Reply Cancel reply

Getting started ​

Installation ​.

Then in your components you can start the tour

In setup function use useVgt composable

if prop name is set then you start the tour $vgt[name].start(0)

# Create a tour

VueJS Tour is written for Vue 3. There are no plans to support Vue 2.x

# Adding the component

Add the VueJS Tour component anywhere in your app. It is recommended to add it to App.vue and create the required steps using <script setup> syntax.

# Start the tour

To start the tour, you can use the autoStart prop...

...or call the startTour() method on the component instance.

open in new window . If the target is not found, the step will be skipped.

# Using multiple tours

To use multiple tours at once use the name prop.

This will create a separate localstorage entry if the tour is finished or skipped, so the tour will not start again.

Ron Cartwright

2 years ago

A Lightweight, Simple and Customizable Guided Tour Plugin for Vue.js

Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.

Table of Contents

Getting started, something missing.

You can install vue-tour using npm or by downloading the minified build on GitHub.

Then import the plugin in your application entry point (typically main.js if you used vue-cli to scaffold your project) and tell Vue to use it. Also don’t forget to include the styles. You can add the styles provided by default or customize them to your own liking.

Finally put a v-tour component in your template anywhere in your app (usually in App.vue) and pass it an array of steps. The target property of each step can target a DOM element in any component of your app (as long as it exists in the DOM when the concerned step pops up).

For all individual elements you want to add a step on, make sure it can be retrieved with document.querySelector() . You can use any selector, an ID, a CSS class, data attributes, etc. Once this is done and your steps correctly target some DOM elements of your application, you can start the tour by calling the following method.

For a more detailed documentation, checkout the docs for vue-tour .

before() UI step functions

If you need to do UI setup work before a step, there’s a before function you may include in any/each of your steps. This function will get invoked before the start/next/previous step is rendered. The function must return a promise. The function is invoked when start , nextStep , and previousStep are triggered. When the promise is rejected, it will not move to the next or previous step. If the promise is resolved then it will move in the direction specified.

It’s used when you need to change what’s shown on the screen between steps. For example, you may want to hide one set of menus and open a screen or you want to perform an async operation. This is especially useful in single-page applications.

If you have a feature request or found a bug, let us know by submitting an issue.

Download Details:

Author: pulsardev The Demo/Documentation: View The Demo/Documentation Download Link: Download The Source Code Official Website: https://github.com/pulsardev/vue-tour License: MIT

#vue #vuejs #javascript #web-development

made with vue.js

Customizable Tour Plugin

Description

"Vue Tour is a lightweight, simple and customizable Vue.js tour plugin. It provides a quick and easy way to guide your users through your application."

• 📊 Statistics

Social Media Links

• ⬆️ Latest commit: 2 years ago
• 📦️ Latest release: v2.0.0 on 28 Mar
• 💬️ Issues open: 72
• 🚨 This project seems to not be actively maintained.
• Website pulsardev.github.io

Related Projects

• #Frameworks
• #UI Components
• icon-divider Created with Sketch.
• View all Projects

• 4 Dependencies
• 2 Dependents

Forked from vue-tour

Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js 3. It provides a quick and easy way to guide your users through your application.

Table of Contents

Getting started, something missing.

You can install vue3-tour using npm or by downloading the minified build on GitHub.

Then import the plugin in your application entry point (typically main.js if you used vue-cli to scaffold your project) and tell Vue to use it. Also don't forget to include the styles. You can add the styles provided by default or customize them to your own liking.

Finally put a v-tour component in your template anywhere in your app (usually in App.vue) and pass it an array of steps. The target property of each step can target a DOM element in any component of your app (as long as it exists in the DOM when the concerned step pops up).

For all individual elements you want to add a step on, make sure it can be retrieved with document.querySelector() . You can use any selector, an ID, a CSS class, data attributes, etc. Once this is done and your steps correctly target some DOM elements of your application, you can start the tour by calling the following method.

For a more detailed documentation, checkout the docs for vue-tour .

before() UI step functions

If you need to do UI setup work before a step, there's a before function you may include in any/each of your steps. This function will get invoked before the start/next/previous step is rendered. The function must return a promise. The function is invoked when start , nextStep , and previousStep are triggered. When the promise is rejected, it will not move to the next or previous step. If the promise is resolved then it will move in the direction specified.

It's used when you need to change what's shown on the screen between steps. For example, you may want to hide one set of menus and open a screen or you want to perform an async operation. This is especially useful in single-page applications.

If you have a feature request or found a bug, let us know by submitting an issue.

Package Sidebar

npm i vue3-tour

Git github.com/alexandreDavid/vue3-tour

github.com/alexandreDavid/vue3-tour#readme

Downloads Weekly Downloads

Unpacked size, total files, last publish, collaborators.

Minimal Guided Tour Component For Vue 3

A simple yet fully configurable guided tour component for your next Vue 3 projects.

How to use it:

1. Install and register the Guided Tour.

2. Add the component to the template.

3. Assign steps to your components & elements.

4. Available props.

5. API methods.

• @after-start
• @after-move

v0.5.0 (10/26/2023)

Download Details:

Author : yaminncco

Live Demo : https://yaminncco.github.io/vue-guided-tour/

Download Link : https://github.com/yaminncco/vue-guided-tour/archive/refs/heads/main.zip

Official Website : https://github.com/yaminncco/vue-guided-tour

Install & Download:

Related posts.

Myend Tour is a fork of Vue Tour, following is Vue Tour's documentation.

Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.

Table of Contents

Getting started, something missing.

You can install vue-tour using npm or by downloading the minified build on GitHub.

Then import the plugin in your application entry point (typically main.js if you used vue-cli to scaffold your project) and tell Vue to use it. Also don't forget to include the styles. You can add the styles provided by default or customize them to your own liking.

Finally put a v-tour component in your template anywhere in your app (usually in App.vue) and pass it an array of steps. The target property of each step can target a DOM element in any component of your app (as long as it exists in the DOM when the concerned step pops up).

For all individual elements you want to add a step on, make sure it can be retrieved with document.querySelector() . You can use any selector, an ID, a CSS class, data attributes, etc. Once this is done and your steps correctly target some DOM elements of your application, you can start the tour by calling the following method.

For a more detailed documentation, checkout the docs for vue-tour .

before() UI step functions

If you need to do UI setup work before a step, there's a before function you may include in any/each of your steps. This function will get invoked before the start/next/previous step is rendered. The function must return a promise. The function is invoked when start , nextStep , and previousStep are triggered. When the promise is rejected, it will not move to the next or previous step. If the promise is resolved then it will move in the direction specified.

It's used when you need to change what's shown on the screen between steps. For example, you may want to hide one set of menus and open a screen or you want to perform an async operation. This is especially useful in single-page applications.

If you have a feature request or found a bug, let us know by submitting an issue.

• JavaScript 23.1%