Exploring the capabilities of a VueJS-compatible product tour library

I am currently working on implementing a feature intro tutorial for my web application, similar to what can be done with intro.js. However, I am encountering an issue where nothing seems to happen when using intro.js - no error messages or tour messages are displayed. I have tried setting up the necessary data attributes that intro.js requires and calling the tour start function from the mounted method in App.vue, but unfortunately it has not worked. I am interested in hearing from anyone who has experience using libraries like this in conjunction with VueJS.

Code snippet from App.vue:

mounted: function() {
  const introJS = require('intro.js')
  introJS.introJs().start()
}

Within the same component in its template section:

<div class="card card-accent-info" v-if="!isLoading" data-intro="Test step here" data-step="1">

I have also imported the necessary CSS in App.vue:

@import "~intro.js/minified/introjs.min.css";

javascriptvue.jsintro.js

Answer №1

You may encounter an issue with the way you are importing the CSS using the <style> tag. To ensure that the styles are applied correctly, consider importing the CSS within your JavaScript code:

<!-- MyComponent.vue -->
<script>
import "intro.js/minified/introjs.min.css";

export default {
  mounted() {
    const introJS = require("intro.js");
    introJS.introJs().start();
  }
};
</script>

Check out the demo here!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing Users from Uploading Anything Other than PDFs with Vue

I am currently working with Bootstrap-Vue and Vue2. Utilizing the Form File Input, I want to enable users to upload files, but specifically in PDF format. To achieve this, I have included accept="application/pdf": <b-form-file v-model=&quo ...

javascriptvue.jspdfbootstrap-vue

Using Angular's ng-repeat to display a combination of different elements

I'm currently working on transitioning a form from .Net MVC to Angular. I've successfully used ng-repeat to generate the input fields within the form, which is working well. However, I now need to incorporate select fields along with the text inp ...

javascript.netangularjsasp.net-mvc

tips for showcasing an item in a tooltip within a data table

I am working on dynamically creating a table with data retrieved from an ajax response. My goal is to display the data stored in an object within a tooltip attached to each cell. Currently, I have successfully rendered the table, but it is displaying `[obj ...

javascriptjqueryjsonhtml-tabledatatable

JavaScript Navigation Bar Error: The value of 'undefined' is not recognized as an object

Having just started learning HTML, CSS, and JavaScript, I encountered an error message that reads: TypeError: 'undefined' is not an object. Despite my best efforts to troubleshoot the issue, I have been unable to resolve it. Is there anyone who c ...

javascripthtml

My goal is to create a carousel using Vue 3 with the Composition API and TypeScript

Creating a carousel with Vue 3 and TypeScript has been quite challenging for me. I heard about using "vue-awesome-swiper" to build a carousel, but I couldn't find a tutorial on how to use it. Does anyone know how to utilize this tool effectively? Alte ...

typescriptvue.js

"Successfully implementing AJAX POST functionality, but encountering issues where callbacks are not triggering

I have gone through numerous posts addressing this issue and attempted various solutions, however, none seem to work for me. My AJAX POST function correctly adds the email to my mailing list, but the success and error callbacks are not consistently firing, ...

javascriptjqueryajaxpost

Transitioning from a multipage application to Piral: A comprehensive guide

Our organization operates several ASP.NET Core applications that are traditional multipage applications. As we develop a new portal using Piral, we want to incorporate elements from our existing applications while also introducing new modules. How can we ...

javascriptreactjsasp.net-coremicro-frontendpiral

`I am facing issues with class binding in Vue 3 when using SwiperJS`

Currently, I am working with Vue 3 along with swiperjs. I have encountered a problem related to the v-bind:class behavior in my project. The issue arises when transitioning to the second slide, where the !h-auto class does not get applied as expected. St ...

javascriptcssvue.jstailwind-cssswiper.js

What are some ways to transfer information seamlessly between two PHP files without the need for a page refresh?

On my webpage, I have implemented two iframes. The first iframe contains a button that, when clicked, should reload the second iframe with specific data, without reloading the first iframe. I am looking for a way to achieve this. Can anyone help? <?p ...

phpjavascripthtmlajaxpost

What is the process for exporting a plugin from dayjs() in JavaScript?

Currently, I have incorporated the plugin isToday() to enhance the capabilities of dayjs(). Nevertheless, I am uncertain about how to export isToday() in order to utilize it across other files. import isToday from "dayjs/plugin/isToday"; expor ...

javascriptreactjstypescriptdayjs

Issue with redirect using Node.js promise

I’ve created a settings page where users can add and remove filters. To handle the deletion process, I’ve implemented this jQuery function: $('#delete-filter').click(function (e) { var filtername = $('#filter-list').val(); ...

javascriptnode.jspromise

Connect to the MongoDB database running on localhost using the mongoose library

I am currently learning about the MEAN stack through this helpful tutorial. However, the tutorial assumes a connection to a remote mongodb installation. I have MongoDB already set up and running on my CentOS7 localhost. To modify the mongoose connect line ...

javascriptnode.jsmongodbexpress

How do you pass parameters into a VueJS component?

Recently, I started learning about vueJS. My goal is to be able to pass parameters to a component based on the selected routes. Below is a snippet from my App.vue: <template> <div id="main"> <header> <h1 style=&qu ...

vue.jscomponents

Toggle between different socket.io servers for seamless connectivity

I'm looking for help with a situation where I need a socket.io client to connect to server A, disconnect, and then connect to server B. Any ideas on how I can achieve this? Thanks in advance! UPDATE: Attached below is the code snippet that's gi ...

javascriptnode.jssocket.io

Issue: Missing authentication code (Mongoose-encryption)

Encountering an error when trying to login a registered user. The error appeared after implementing the dotenv package to secure my database encryption key. Fortunately, proccess.env.SECRET is functioning correctly. Identified the potential issue here: ...

javascriptnode.jsexpressmongoosebody-parser

How can I select the div inside the second to last li element?

Within a particular list item, I have three divs. I am trying to target the second to last list item which contains a div with the class 'designnone'. Here's what I have so far: $('div[groupname=' + groupName + ']').find ...

javascriptjqueryasp.net

The method of pausing a function until the result of another function is returned

There is a function named 'updateProfile()' that includes a condition, which checks for the value of variable 'emailChangeConfirm' obtained from another function called 'updateEmailAllProcessing()'. The issue lies in the fact ...

javascriptangulartypescriptionic3

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...

javascripthtmljquerybootstrap-4bootstrap-table

Is it possible to reset the existing localStorage value if we access the same URL on a separate window?

In my app, there are two different user roles: admin and super admin. I am looking to create a new window with a Signup link specifically for registering admins from the super admin dashboard. Is it possible to achieve this functionality in that way? Cu ...

javascriptangular

Setting up protected routes using react-router-dom version 6

When a visitor navigates to / (home), I want them to be redirected to /connexion" if they are not connected. To achieve this, I have implemented Private routes that work well. Now, I need to create the logic that will handle the redirection based on t ...

javascriptreactjsreact-router-domuse-effect