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 piled app.js
file and I know introJS is being piled 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"
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 piled app.js
file and I know introJS is being piled 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
beforenew Vue({...})
? – 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 Commented Jul 16, 2017 at 20:12
-
2
Try this
introJS.introJs().start()
– Ikbel Commented Jul 16, 2017 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 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 Commented Jul 16, 2017 at 20:32
1 Answer
Reset to default 7This should work:
const { introJS } = require('intro.js')
introJS().start()