How do I load an externally hosted (CDN) JS library *before* the VueJS instance is created?

Question

I'm trying to integrate Material Design Lite in a VueJS application. 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 from 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:

• The commit introducting MDL and the error
• The "index.html" file containing the links to the CDN
• The VueJS "entry-point" which calls componentHandler

I'm fairly certain that MDL is loaded after the VueJS app is loaded, so the reference does not exist.

How can I make sure VueJS is only loaded after the dependencies are available?

Or, as I'm using webpack to build the code: Is there another way to integrate MDL? Maybe packing it up into the application?

Answer 1

That is a linting error not an actual code error. The linter couldn't find a method/variable called componentHandler . Doesn't necessarily mean that the code doesn't work, try using window.componentHandler to get the linter to stop complaining. You could also look into linter ignore rules to ignore that specific line and see if it builds then.

The linter runs in the build process in the webpack vue template, so the build will fail since it couldn't find a the reference you used in your vue codebase. The linter doesn't know about the scripts you load externally in your html files.

As Bert said, I would also remove the defer

If you are unfamiliar with linters, all it does is look over your js code and check that you don't use undefined variables (like in this case), or use wrong indentation, etc. The vue template put the linter in the build process so you won't get a proper build until you have fixed everything the linter wants you to fix. You could disable linting entirely, but I recommend against it as it improves overall code quality if you keep it around imo.