Introduction to Web Assets in Joomla 4

Introduction to Web Assets in Joomla 4

One of my favorite improvements in Joomla 4 is the "Web assets" feature. It allows you to load a set of JavaScript and CSS files in a specific order with a single call.

Let's say you want to load CSS or JavaScript files that depend on other files. For example, you may want to load a JavaScript file that depends on jQuery being loaded first.

In this short tutorial, I will show you how the "Web assets" feature of Joomla 4 works.

Note: Since Joomla 4 is still in the Beta phase, this approach may work differently with the stable version.

Introducing the joomla.asset.json file

In your template's folder, you can create a file named joomla.asset.json. Cassiopeia, the default Joomla 4 template, already includes this file which contains the following 3 assets:

  • template.cassiopeia.base
  • template.cassiopeia.ltr
  • template.cassiopeia.rtl

Here's how those 3 assets appear in the code of Cassiopeia's joomla.asset.json file:

joomla 4 web assets

The joomla.asset.json file will run in the frontend of your Joomla 4 site automatically. However, you need to define which assets you want to call.

How to call an asset

To call an asset, place the following two lines of code in the index.php file of your template:

$wa = $this->getWebAssetManager();

The second line of the code above means we will call assets in the following order:

  • Dependencies and files from the "template.cassiopeia.base" asset.
  • Files from the template.cassiopeia.ltr asset.

joomla 4 web assets

The cool thing is that dependencies can be nested. So, an asset that depends on another asset, can have its own dependencies. This is what makes the  "Web assets" feature of Joomla 4 so powerful.

More on Joomla 4's new features

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.