How do I load an externally hosted JS library (CDN) * before VueJS is instantiated?
I am trying to integrate Material Design Lite into a VueJS app. I found the following blog post:
https://posva.net/js/2015/08/26/using-material-design-lite-with-vuejs
Unfortunately, when I add this to my "main.js" file created with the vuejs
cli tool , I get the following error:
ERROR in ./src/main.js
✘ http://eslint.org/docs/rules/no-undef 'componentHandler' is not defined
/data/src/main.js:474:5
componentHandler.upgradeElement(this.el)
I pushed a branch to github so the code is visible. It contains:
- Commit MDL input and error
- The "index.html" file containing links to the CDN
- VueJS "entry point" which calls
componentHandler
I'm pretty sure the MDL is loaded after the VueJS app is loaded, so the link doesn't exist.
How can I make sure VueJS is only loaded after dependencies are available?
Or, since I am using webpack to generate the code: is there any other way to integrate MDL? Maybe package it into an app?
source to share
This is a linting error, not an actual code error. LINTER could not find a method / variable named componentHandler
. Doesn't necessarily mean the code doesn't work, try using window.componentHandler
to make linter stop complaining. You can also look at the linter ignore rules to ignore that particular line and see if it gets generated then.
The linter is run during the build process in the vp webpack template, so the build will fail as it cannot find the link you used in your vue codebase. LINTER does not know about scripts that you load from outside into your html files.
As Bert said, I will also delete defer
If you are not familiar with linters, all it does is look at your js code and check that you are not using undefined variables (as in this case), or use the wrong indentation, etc. The vue template puts the linter in the build process so that you don't get the correct build until you've fixed whatever your Linter wants to do. You can turn off the listing entirely, but I recommend against it as it improves the overall quality of the code if you keep it around imo.
source to share