The complete code for this tutorial is in this GitHub repo if you want to download it.
Change into the directory and create the files we’ll need:
Remove the inline script from index.html and instead use script tags to link to our modules. Note the
This is a component like any other you’ve created, only you export the configuration object since it’s a module:
Now we can import it and use it in our Vue app:
Serving the App
For a simple project like this all you need is a static server on the command line with the
We can use a script tag with the
nomodule attribute to write a simple error message to the document:
A far better fallback, though, would be to use a Webpack bundled version of the project. This simple config will do the job:
After a build, the bundle can now be loaded as the fallback script:
This Webpack version will work identically in a browser without native module support. Here it is in Firefox, note that build.js has loaded and not the module:
Using the module system gives you a smaller project size. However, the Webpack project loads quicker overall.
Note: these figures are from a Lighthouse test with an HTTP/2 server.
I suspect preloading would improve the speed of the modules project, but we’re a bit early for this to work:
Webpack is still the better choice for module-based architectures, but it’s nice to know native modules are a thing.