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";

Add example code to show where you're getting stuck, can't help you without seeing the code. — Andrei, Sep 14 '17 at 03:36
@Andrei Sorry, forgot to add the code. Added it in the post. As far as I understand for intro.js, I think that should be all I need to run it. — bschulte3, Sep 14 '17 at 03:46
Could you try and `console.log` introJS to at least ensure it has loaded properly. Just take babysteps for debugging and start at the root. — Stephan-v, Sep 14 '17 at 09:08

score 2 · Answer 1 · answered Jul 21 '18 at 05:51

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

Using a product tour library with VueJS

1 Answers1