Join the DZone community and get the full member experience.Join For Free
Let's use the vue-cli simple template to do this. That's right, the one without any Webpack.
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.
Published at DZone with permission of Anthony Gore, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.