Component FAQ

What is the difference between Alpine and Loki Components?

A regular Alpine component is instantiated via the HTML attribute x-data of some HTML element and bound to the same HTML element (so that Alpine x-* bindings come into action). The x-data attribute refers to component data defined somewhere: An inline JSON definition, an external function or by using Alpine.data(). With Loki, we use exclusively Alpine.data().

A Loki Component is an Alpine component. However, the x-data attribute refers to ready-made components (like the base LokiComponent). Through this, each Loki Component gets a lot of out-of-the-box functionality, among which the option to submit data back to the server with an AJAX request and to update other HTML elements using the AJAX response.

When would I build a Loki Component?

You would transform a regular component into a Loki Component, if you would like to add the following features:

  • When you want to submit data from the browser back to the server (aka an AJAX call);
  • When you want to add AlpineJS behaviour, without writing everything yourself;

When does a block not need to be a Loki Component?

  • If it is just being refreshed by being a <target/>
  • If it is only displaying data, retrieved from a regular ViewModel (so not a ComponentViewModel)
  • If the block is only rendering child-blocks
Last modified: April 30, 2025