Using luge with a JS framework

JS frameworks (React, Vue, Angular, …) natively offer functionalities like page loading and transition, but you may still want to use other luge features like smooth scroll, scroll animation and more.

In order to refresh luge after a page (or component) change and initialise the newly added DOM elements, you must manually call the refresh cycle from the life cycle. Simply call luge.lifecycle.refresh() after the previous page has been removed from the DOM.

In React it should be in the useEffect or ComponentDidMount hooks.

In Vue it should be on the destroyed hook.

In Angular it should be on the ngOnDestroy hook.