Skip to main content
Jack Sleight .DEV

Alpine

Force Alpine component re-initialisation on hot reload

In a previous post I outlined a method for hot reloading Statamic's live preview using Alpine's Morph plugin. It works, but there's an issue: Alpine components on the page don't re-initialise when the DOM is morphed. Depending on the component, this can break things when the new… More

Hot reloading Statamic's live preview with Alpine or Livewire

Statamic 3.4.8 includes a fantastic PR by Tom Diggelmann that adds the option to send the live preview a post message on update, rather than fully refreshing the page. This allows you to update the page however you like, and can be used to hot-reload the content if your stack… More

Alpine x-node directive

Alpine's x-text and x-html directives allow you to set an element's text or HTML content, but what if you have a DOM node, either from the current page or one that you've created, and want to add that to an element with Alpine? You could use innerHTML and x-html, but that may… More