Idea

The idea behind this tool is that you can download a Liferay page with Vue portlets.
It prepares a Liferay page for webpack.

npx liferay-vue-utils

or

npx liferay-vue-utils liferay.vue.config.js

What does it?

It generates a public folder with the following content:

• index.html (Indexpage for Webpack)
• vueComponents.json (data all Vue calls)

How it works

It scans for the following attribute on a HTML-tag:

data-portlet-type="vue"

1. If the script finds the attribute on a tag it copies the id and generates a json file.
2. If the following script tag has a "Vue call" with the following structure, then the script also saves it.
3. In the end it checks all script-tags removes all "Vue calls"

Vue calls get found the following way:

new Vue(
...
)

Development with Webpack (Recommended)

Why Webpack and not Liferay Blade Deploy?

There are some drawbacks with the Liferay development and Vue. When you use the webpack you work around this problems.

The mains advantages are:

1. No caching
2. Build needs 1 sec
3. Hotreload (reloads the page when build is finished)
4. Vue Devtools are working
5. Good Errormessages

How to set it up

1. create a liferay.vue.config.js in the root of the module.
2. Add auth.token.check.enabled=false to the portal-ext.properties
3. Configure your http to redirect to webpack

Example for liferay.vue.config.js

module.exports = {
  protocol: 'http',
  host: '[URL]',
  originPort: 80,
  port: 3000,
  loadInline: {
    selector: '[src*=\'example.js\']'
  },
  remove: {
    selector: '*[data-portlet-type="vue"] + script'
  }
}

How to update your index.html

npx liferay-vue-utils

or

npx liferay-vue-utils liferay.vue.config.js

Problems

I always get: Path must be a string. Received undefined -> Ignore it