Integrations

This is a collection of solutions for integrating swup with other popular tools.

Astro

Astro and swup are a great fit. Where Astro manages the rendering of your site, swup takes over and adds smooth page transitions, smart preloading and caching on the client side.

Check out the official Astro integration for swup for getting started quickly.

// astro.config.mjs
import { defineConfig } from 'astro/config';
import swup from '@swup/astro';

export default defineConfig({
  integrations: [swup()]
});

// astro.config.mjs
import { defineConfig } from 'astro/config';
import swup from '@swup/astro';

export default defineConfig({
  integrations: [swup()]
});

Alpine.js

Swup works well with Alpine.js for managing component state and automating page lifecycles. Just initialize both libraries and enjoy automatic initialization of your components:

import Swup from 'swup';
import Alpine from 'alpinejs';

const swup = new Swup();
Alpine.start();

import Swup from 'swup';
import Alpine from 'alpinejs';

const swup = new Swup();
Alpine.start();

<div id="swup">
  <div x-data="{ name : 'My Component' }" x-init="console.log(name + ' initialized!')">
    My Component
  </div>
</div>

<div id="swup">
  <div x-data="{ name : 'My Component' }" x-init="console.log(name + ' initialized!')">
    My Component
  </div>
</div>

To register handlers for swup's hooks inside your Alpine components, you need to prepend swup to all hook names. You can access swup's visit object using the detail property on Alpine's $event magic. For example, hooking into page:view would look like this:

<div x-data x-on:swup:page:view.document="console.log('Visit new page', $event.detail.visit.to.url)">
  My Alpine Component
</div>

<div x-data x-on:swup:page:view.document="console.log('Visit new page', $event.detail.visit.to.url)">
  My Alpine Component
</div>

Integrations

Astro

Alpine.js

Handling swup hooks