7

I'm building my first project using vue-cli and webpack and I'm not sure how to properly use an external JavaScript library to my project.

I want to add the Intro.js library which simply requires me to import the intro.js, add some tags to some HTML elements, and call the introJs().start() function.

I've installed the library with npm install introj.js --save

I've imported the library by adding import introJS from 'intro.js' into my <script> section of my App.vue file.

I've checked the compiled app.js file and I know introJS is being compiled so everything is good there.

My question is, where do I put introJs().start()? I tried putting it in the mounted() function of the App.vue file but that doesn't work.

Additional Info: When I try to run introJS().start() from the mounted () method in App.vue I receive this error: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_7_intro_js___default(...) is not a function"

Ikbel
  • 7,721
  • 3
  • 34
  • 45
Daniel D
  • 918
  • 9
  • 18
  • What about putting it in `main.js` before `new Vue({...})` ? – Ikbel Jul 16 '17 at 20:08
  • I tried that but I still get the error above stating that start is not a function. – Daniel D Jul 16 '17 at 20:12
  • 2
    Try this `introJS.introJs().start()` – Ikbel Jul 16 '17 at 20:20
  • That did it! I knew it was going to be something simple. How did you figure it out? Why do I reference it like that? – Daniel D Jul 16 '17 at 20:29
  • Cool. after importing introJS. I stored a global reference to it `window.introJS = introJS`. Then inspected it in the console. – Ikbel Jul 16 '17 at 20:32
  • But if I open the console and type window.introJS it says its undefined. It still works but I would like to know how to view the object in console as that could help me troubleshoot things like this in the future. – Daniel D Jul 16 '17 at 20:36
  • Never mind. I misread. You created the global reference. I thought it was created automatically. – Daniel D Jul 16 '17 at 20:39
  • Yes, the console is your friend. if it's undefined then you might have missed importing the library? – Ikbel Jul 16 '17 at 20:39

1 Answers1

7

This should work:

const { introJS } = require('intro.js')
introJS().start()
Ikbel
  • 7,721
  • 3
  • 34
  • 45