Client Extensions · AMP
Building Client Extensions with Vue.js and Angular
Build Vue.js or Angular client extensions by compiling your web application into standard Web Components (Custom Elements). Define a client-extension.yaml mapping the generated JS and CSS, register it, and render the widget on any Liferay page.
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.
Read the full article, with table of contents, comparison table, and author bio →