Adding the Intro.JS library to a Vue-Cli / Webpack project

Question

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"

What about putting it in main.js before new Vue({...}) ? — Ikbel
– Ikbel, Commented Jul 16, 2017 at 20:08
I tried that but I still get the error above stating that start is not a function. — Daniel D
– Daniel D, Commented Jul 16, 2017 at 20:12
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
– Daniel D, Commented Jul 16, 2017 at 20:29
Cool. after importing introJS. I stored a global reference to it window.introJS = introJS. Then inspected it in the console. — Ikbel
– Ikbel, Commented Jul 16, 2017 at 20:32

Ikbel · Accepted Answer · 2019-11-04 13:07:38Z

7

This should work:

const { introJS } = require('intro.js')
introJS().start()

edited Nov 4, 2019 at 13:07

answered Jul 16, 2017 at 20:37

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VitoCK Over a year ago

For me it says that Cannot read properties of undefined (reading 'start'). Do I have to use it with older version of intro.js like 2.9.3 or what?

Collectives™ on Stack Overflow

Adding the Intro.JS library to a Vue-Cli / Webpack project

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related