Combining LiveView with SPAs

We have done similar in a few instances where Angular loads it’s content containing custom HTML tags which hold the URL to a corresponding LiveView endpoint. The LiveView rendered template is loaded into each corresponding tag and once they are all loaded the LiveView socket is created from a callback.

This is not ideal as the socket needs to be reinitialized any time the JS framework changes the content on the page containing the custom tags.

A better way IMO, if possible, is to load LiveView first as the skeleton of the page then use phx-ignore and phx-hook to bootstrap JS components one by one. This requires extra work if you have an existing app with data resolving in it’s router layer, which will need to be moved to data attributes or loaded from the JS components.

1 Like