Message Boards

Primevue

Hairi Lani, modified 3 Years ago.

Primevue

New Member Posts: 17 Join Date: 4/9/20 Recent Posts
Hi.I'm developing portlet in Vue and using Primevue UI with Liferay 7.2.My question is, can we create multiple portlets in one Vue project?My problem is, how to import Primevue CSS into Liferay. My portlet failed to render the CSS and I saw errow 404 in the liferay console.I do import those css in .js file
// Importing the Nova Light PrimeVue theme styles import 

'primevue/resources/themes/nova-light/theme.css'; 

// Importing the base PrimeVue component styles import 

'primevue/resources/primevue.min.css'; 

// Importing the base PrimeIcon styles 

import 'primeicons/primeicons.css';

I've try 2 ways to create new or adapt existing Vue project but still not working.
[code]yo liferay-js
[code]yo liferay-js:adapt
Anyone can help ?
Thanks/Hairi
thumbnail
Andrew Jardine, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hi Hairi, 
I think the more correct approach would be to import CSS resource of this scale into a theme and have the them applied to a page where you have added your vue widget. Yes, it's true that you can bundle CSS with a widget (portlet), but that functionality is normally reserved for overrides. As soon as you have more than one widget that needs to use the same set of styles, imho, you should be considering leveraging the theming capabilities.
Hairi Lani, modified 3 Years ago.

RE: Primevue

New Member Posts: 17 Join Date: 4/9/20 Recent Posts
Hi Andrew.I'll will try to move it to themes. But I success to make it work by doing this inside style.css.

@import '../index.css';@import 'primevue/resources/themes/nova-light/theme.css';
@import 'primevue/resources/primevue.min.css';
@import 'primeicons/primeicons.css';

But another problem I'm facing right now is the jar files exceed more than 100MB even I just created one page only.
It took around 10min to deploy to liferay every times to test my code. Quite troublesome
thumbnail
Andrew Jardine, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
100 MB!   emoticon

That's CRAZY. Even including the entire primevue framework in there, I doubt it should grow to that size. I am not familiar with primevue but I am assuming that it's just a display framework, like bootstrap?

What is the purpose of the portlet you have built? Are you bundling a bunch of third part libraries with it? Can you share with us any of the details around your code (eg. your build.gradle, your bnd file .. or even the entire module zipped up that we can download from somewhere?)
Hairi Lani, modified 3 Years ago.

RE: Primevue

New Member Posts: 17 Join Date: 4/9/20 Recent Posts
package.json
"devDependencies": {
        "babel-cli": "6.26.0",
        "babel-loader": "7.1.5",
        "babel-preset-env": "1.7.0",
        "copy-webpack-plugin": "^5.1.1",
        "liferay-npm-build-support": "^2.18.4",
        "liferay-npm-bundler": "^2.18.4",
        "webpack": "4.29.6",
        "webpack-cli": "3.3.0",
        "webpack-dev-server": "3.2.1"
    },
    "dependencies": {
        "@fullcalendar/core": "^4.4.0",
        "axios": "^0.19.2",
        "chart.js": "^2.9.3",
        "core-js": "^3.6.4",
        "primeicons": "^2.0.0",
        "primevue": "^1.2.0",
        "quill": "^1.3.7",
        "update": "^0.7.4",
        "vue": "^2.6.11",
        "vue-router": "^3.1.6",
        "vuex": "^3.1.3"
    },
    "scripts": {
        "build": "babel --source-maps -d build src && vue-cli-service build --dest build/ --formats commonjs --target lib --name index ./src/index.js && npm run copy-assets && liferay-npm-bundler",
        "copy-assets": "lnbs-copy-assets",
        "translate": "lnbs-translate",
        "deploy": "npm run build && lnbs-deploy",
        "start": "lnbs-start"
    },

.babelrc
 {
    "presets": ["babel-preset-env"]
}

.npmbuildrc
{
    "translatorTextKey": "",
    "supportedLocales": [],
    "liferayDir": "D:/liferay-dxp-7.2.10-ga1",
    "webpack": {
        "rules": [
              {
                "test": "src\\/.*\\.js$",
                "use": "babel-loader"
              },
              {
                "test": "src\\/.*\\.vue$/",
                "loader": "vue-loader"
              },
              {
                "test": "src\\/.*\\.css$/",
                "use": [
                  "vue-style-loader",
                  "css-loader"
                ]
              }
        ]
    }
}

.npmbundlerrc
{
    "create-jar": {
        "output-dir": "dist",
        "features": {
            "js-extender": true,
            "web-context": "/vue-ui",
            "localization": "features/localization/Language",
            "configuration": "features/configuration.json"
        }
    },
    "dump-report": true
}
thumbnail
Andrew Jardine, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Forgive me -- this is not my are of expertise (not yet anyway, I'm working on it!). So you are creating a widget that is using the Vue javascript framework, right?

The resulting jar file that is in the dist folder for your plugin. If you unpack it, are you able to identify what the super huge files are in there that are causing it to grow to such a large size?
Hairi Lani, modified 3 Years ago.

RE: Primevue

New Member Posts: 17 Join Date: 4/9/20 Recent Posts
I created this project using :
yo liferay-js

When I see the jar content, I saw node_module folder is included. This folder is huge one. I feel that all library imported inside to this jar. lol
thumbnail
Andrew Jardine, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Right -- yes that would make sense. As awesome as node is, it sometimes feels like a waterfall when all you wanted was a glass of water. Ok -- so I would guess then that one of the dependencies you added has resulted in a cascading chain of dependencies that is bloating your plugin. From this list --

    "dependencies": {
        "@fullcalendar/core": "^4.4.0",
        "axios": "^0.19.2",
        "chart.js": "^2.9.3",
        "core-js": "^3.6.4",
        "primeicons": "^2.0.0",
        "primevue": "^1.2.0",
        "quill": "^1.3.7",
        "update": "^0.7.4",
        "vue": "^2.6.11",
        "vue-router": "^3.1.6",
        "vuex": "^3.1.3"
    },


What did you add?
Hairi Lani, modified 3 Years ago.

RE: Primevue

New Member Posts: 17 Join Date: 4/9/20 Recent Posts
    "dependencies": {
        "@fullcalendar/core": "^4.4.0",
        "axios": "^0.19.2",
        "chart.js": "^2.9.3",
        "core-js": "^3.6.4",
"primeicons": "^2.0.0",
        "primevue": "^1.2.0",

        "quill": "^1.3.7",
        "update": "^0.7.4",
        "vue": "^2.6.11",
        "vue-router": "^3.1.6",
        "vuex": "^3.1.3"

    },
Those underline and bold was added. Underline is I just copied from primevue json. Bold is required module for my app and added thru CLI.

How ever I already removed those underline module and the dist reduced to 120MB that prevoiusly was 160MB.
And in node_module, primevue module size is abt 96MB.
Each component will generate *.js.map that size abt 100KB.

So I assume this is what I have to take when use Primevue.Anyway thanks for your hints and if you have any other idea can let me know.
thumbnail
Andrew Jardine, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
I don't have any experience with primevue so this may be a dumb question, but instead of including ALL of the components, is it possible to just include the ones that you need?
Hairi Lani, modified 3 Years ago.

RE: Primevue

New Member Posts: 17 Join Date: 4/9/20 Recent Posts
<p>its hard to me to be selective. plus some of component is depend to other component</p>
thumbnail
Ivan Zaera, modified 3 Years ago.

RE: Primevue

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
This may help you to exclude huge files that are not needed: https://github.com/liferay/liferay-js-toolkit/wiki/.npmbundlerrc-file-reference#exclude
For example, if you don't need the maps, you can exclude them with that configuration and the resulting JAR will be much smaller.
thumbnail
Christoph Rabel, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts
Maybe this approach is better suited for your problem:
https://liferay.dev/blogs/-/blogs/developing-javascript-frontends-with-webpack
https://github.com/dccs-liferay/webpack-example
That approach should do at least some treeshaking and get rid of unused modules. You might need to refrain from loading modules lazy/dynamically  so that all dependencies can be resolved at build time. If you just import everything  the bundle should become reasonable small,
---
Another idea would be to create an extra bundle with the dependencies. It will probably be pretty big, but your main module should become rather small.
https://github.com/liferay/liferay-js-toolkit/wiki/How-to-use-liferay-npm-bundler
I am pretty sure there is an example somewhere. Ivan can probably help here.
thumbnail
Ivan Zaera, modified 3 Years ago.

RE: Primevue

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
There's an example with React where the framework is put in a provider project that gets built once and deployed and then you forget about it. Then, there are portlet projects that consume React from it.
It's here -> https://github.com/izaera/liferay-js-toolkit-showcase/tree/react
Have a look at it, as Christoph suggests. It won't make things smaller, but will make your build and deploy lighter.
thumbnail
Andrew Jardine, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
I have a question as I am trying to learn about all this and all the different ways it can be done. The question might be dumb, but I'm going to ask it anyway. 


Why would you wrap all these resources in a portlet in place of placing them in the theme? 
thumbnail
Christoph Rabel, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts
A theme is certainly a possible place for this stuff, but it's easier if things are more modularized. I wouldn't think of it as a portlet, I would think of it as a module. The portlet is just a convenient container (from the Liferay platform/implementation perspective).
Here in this thread it is mostly about the benefit of decreasing the size and speeding up the deployment of the main module. But for me it is mostly a modularization issue. I usually try to keep each module as small as possible so that each module does only what it is supposed to do. Nothing more, nothing less.
Putting the dependencies in the theme violates that principle. Let's say, there are 5 teams who work on the homepage. So, whenever one of them wants to change a dependency, the theme has to be updated. But if each one has their dependencies are inside of one or more module, only these modules have to be updated. There could e.g. a module for React, one for Angular, one for Vue.js.
Of course, all teams could also have just their own module, that would make them completely independent, but it is also bad because maybe the same dependency has to be loaded multiple times.
When you google for "microfrontends" you will find a lot of discussions about the various advantages and disadvantages of various approaches. And you will probably also find that Portlets and Microfrontends have a lot in common.
thumbnail
Andrew Jardine, modified 3 Years ago.

RE: Primevue

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Gotcha -- that makes sense. I also suspect that the string attaching Themes to Liferay Solutions is getting thinner and thinner with new features like Master Pages on the horizon. I know that Themes have been a common source of criticism over the years and it certainly feels like Liferay is making an effort to limit the amount of "Liferay knowledge" you need to have to build UIs. Thanks for the insight Christoph! emoticon
Hairi Lani, modified 3 Years ago.

RE: Primevue

New Member Posts: 17 Join Date: 4/9/20 Recent Posts
wow. thanks for the provided source that I can refer. But its gonna take a long time for me to study those information.
BTW I import the source folder direct to my project instead of using node_module.
Some of the component is not working and I'm checking one by one.
One of them is using listener ...this.$listeners,
When this code inside the component, whole Vue show nothing on page.
I attach here the component code. Or maybe I can open on another topic for this issues.

InputText.vue
<template>
    <input :class="['p-inputtext p-component', {'p-filled': filled}]" v-on="listeners" :value="value" />
</template>
<script>
export default {
    props: {
        value: null
    },
    computed: {
        listeners() {
            return {
                ...this.$listeners,
                input: event => this.$emit('input', event.target.value)
            };
        },
        filled() {
            return (this.value != null && this.value.toString().length > 0)
        }
    }
}
</script>
thumbnail
Ivan Zaera, modified 3 Years ago.

RE: Primevue

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
I see you are using .vue files. That's not yet supported by our bundler (see https://github.com/liferay/liferay-js-toolkit/issues/257). It will work in bundler v3, but there's no release date yet, though we are already working on it.

However, check the link, because you may find some ideas there that may be useful if you still want to use .vue file instead of breaking them apart.