Main Answer: Building Liferay Client Extensions with Vue.js or Angular requires compiling components to standard Web Components and registering them via YAML configs.
Audience: Frontend developers, layout designers, and client extension developers.
Applicable Use Cases: Integrating modern Vue/Angular components, building custom widgets, and migrating decoupled applications.
| Vite Build Output | YAML Mapping Type | Liferay Portal Result |
|---|---|---|
| dist/assets/index.js | custom-element type asset | Loads Vue/Angular runtime and mounts custom selector tag |
| dist/assets/index.css | custom-element CSS asset | Applies compiled Vue/Angular styling rules to container shadow DOM |
| dist/assets/logo.png | static-resource type asset | Hosts logos and media files on portal local web path |
How Do You Compile Vue.js and Angular Web Components for Liferay DXP?
Direct Answer: Configure build scripts to wrap application blocks into custom elements, bundling SASS templates and runtime logic into single files.
Liferay Client Extensions mount frontends as standard HTML Custom Elements. For Vue.js, use
defineCustomElement to compile components. For Angular, use the @angular/elements
package to transform standard Angular modules into native browser custom elements, ensuring styling isolation
via Shadow DOM.
Vite or Angular build utilities compile code to clean Custom Elements, allowing them to mount on HTML selector tags inside Liferay layouts.
How Do You Configure the liferay-client-extension.yaml Manifest?
Direct Answer: Create a manifest defining configuration details (extension name, HTML custom element selectors, and CSS/JS build file paths).
Map your compiled assets in a client-extension.yaml file. This descriptor tells Liferay where
static scripts and stylesheets reside and registers the custom element name:
vue-tracker-widget:
cssURLs:
- css/tracker.css
friendlyURLMapping: vue-tracker
htmlElementName: liferayx-tracker
name: Vue Tracker Widget
type: customElement
url: js/tracker.js
The portal reads YAML details on deploy, registering custom elements in page editors without container restarts.
How Do You Deploy and Test decoupled widgets in Liferay?
Direct Answer: Deploy extensions by copying build files to the workspace deploy folder. Add custom elements to test page layouts and verify configurations.
Zip your project files and place the archive in Liferay's deploy folder. The platform dynamically registers the extension. Go to a content page, click the edit sidebar, find your custom element, drag it onto a grid column, and interact with your client-side application.
For additional optimization strategies, visit our detailed Liferay DXP developer blog listing. For configuration specifications, consult the official Liferay Documentation portal.Checking element displays in page builders verifies files render correctly, while browser console audits check for script collisions.
Frequently Asked Questions
Can Vue or Angular widgets share portal CSS?
Yes. In the custom element client extension settings, you can inherit Lexicon/Clay styles or use isolated shadow DOM to block style collisions.
Do client extensions require Liferay restarts?
No. Client extensions deploy dynamically as packages and do not require portal container restarts or downtime.
Written by Ankita Varani
Ankita Varani is a certified Liferay Solutions Architect with 12+ years of experience in enterprise portal migrations and decoupled system designs.