As you can see there is just one javascript file in the lib folder. This file contains all the Vue.js javascript code. This was totally fine for the first sections of the Udemy training, which were just very basic Vue.js scripts.

SVG Graph Example

At this point, I also tried out some of the examples from the Vue.js website, like this SVG Graph example. I just copied the JavaScript code from the example in the portlet's index.es.js file, as well as the html code in the portlet's view.jsp (but making sure to still use the <portlet:namespace />-1 id instead of the demo id from the example). This also worked perfectly so far.

Components

When I came to the section in the Vue course that introduced Vue Components as separate .vue files (e.g. App.vue), I noticed that the liferay-npm-bundler did not process the .vue files at all.

We can see in Liferay's npm-vuejs-portlet template that the build script in package.json first processes the javascript with babel and then packages the code with the liferay-npm-bundler:

This processes all files in the META-INF/resources/lib folder with vue-cli-service and outputs it as one file "index.common.js" in the build folder, where the liferay-npm-bundler can then pick it up afterward. More about the vue-cli-service command(s) can be found here.

We can see that vue-cli-service created 2 files in our build folder: index.common.js and index.css. The Javascript file will be picked up by the liferay-npm-bundler. We'll talk about how to handle the CSS file in the next section.

Scoped CSS

One of the neat things about using Vue Components is that you can add your CSS for that component into the same .vue file and make sure the scope is limited to that component.