Using a product tour library with VueJS

Question

I'm trying to setup a feature intro tutorial for my web app (like intro.js). I'm having trouble with intro.js with nothing happening (no error message or tour messages). I tried setting up the data attributes that intro.js uses and calling the tour start from the mounted function on App.vue, but no luck. I'm looking to see if anyone has experience with with libraries like this combined with VueJS.

Code from App.vue:

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

Inside of the same component in it's <template>:

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

I also have the css loaded in App.vue:

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

Answer 1

The problem might be the way you're importing the CSS from the <style> tag. To get the styles to apply properly, import the CSS in JavaScript:

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

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

demo