alpinejs-defer demo

Components are on a 300ms delay for demonstration purposes.

x-defer:intersect

This example shows how the intersect works when initialising components using IntersectionObserver

x-defer:event

For when you just want to init a component using an event (on the window).

This component has not been initialised yet
This component has not been initialised yet
This component has not been initialised yet

x-defer:interact

Because Alpine doesn't initialise components inside template tags, we've used it to demonstrate how x-defer:interact works. If you used this attribute outside of a template tag, or within another component with x-defer, then you will get this behaviour. Otherwise it will just happen on the very first interaction on the webpage.