Events

As we are replacing the native functionality of the browser, there is a need for a lifecycle that would replace the standard browser page lifecycle (load page and leave page).

Swup emits bunch of events, that we can use to enable JavaScript, trigger analytics, and much more. Handlers are registered and unregistered with swups on and off methods.

When possible, swup also passes original event into the handler (clickLink, hoverLink, and such events get delegateTarget property as the referenced element due to the event propagation).

// trigger page view for GTM
swup.on('pageView', function() {
  dataLayer.push({
    event: 'VirtualPageview',
    virtualPageURL: window.location.pathname,
    virtualPageTitle: document.title
  });
});

swup.on('contentReplaced', function() {
  swup.options.containers.forEach((selector) => {
    // load scripts for all elements with 'selector'
  });
});

swup.off('pageView', handler); // removes single handler of 'pageView' event
swup.off('pageView'); // removes all handlers for 'pageView' event
swup.off(); // removes all handlers for all events

Note: example with enabling scripts above assumes using component based approach, like the one used by Gia framework.

For backward compatibility, all events are also triggered on the document with swup: prefix.

document.addEventListener('swup:contentReplaced', (event) => {
  // do something when content is replaced
});

List of all events