How to integrate AlpineJS into a website using Swup

Question

I am trying to use Alpine (https://github.com/alpinejs/alpine) on my simple Swup (https://github.com/swup/swup) site. Currently I am attempting to implement a carousel using Siema (https://pawelgrzybek.github.io/siema/).

On initial page load everything works as expected, however when I navigate away from a page with a carousel and then back to it, the carousel doesn't work properly. I think this is due to the carousel being initialised again over itself, so I believe I need to destroy the carousel somehow. I have access to events in Swup to make changes when pages are swapped, but I am not sure how to tie this in with Alpine.

I could do with help on how to fix this specific issue, and if anyone has any broader information about how to add Alpine components to a site using Swup that would be great, as I need to add some further components (e.g. dropdowns, modals) after this.

Below is my code:

HTML

<div class="container p-4 mx-auto" x-data="carousel({selector:'.carousel1'})">
  <div class="carousel1">
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 1</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 2</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 3</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 4</div>
  </div>
</div>

scripts.js

// Swup for page transitions - https://swup.js.org/
import Swup from 'swup';

// Scrollreveal for scrolling animations - https://scrollrevealjs.org/
import ScrollReveal from 'scrollreveal';

// Alpine - https://alpinejs.dev
import Alpine from 'alpinejs'
 
window.Alpine = Alpine

import carousel from './modules/_carousel.js';
Alpine.data('carousel', carousel);
Alpine.start();


function init() {
  ScrollReveal().reveal('.headline', { duration: 1000, delay:500, viewFactor: 1 });
}

function unload() {
  ScrollReveal().destroy();
}

const swup = new Swup();
swup.on('contentReplaced', init);
swup.on('willReplaceContent', unload);

init();

_carousel.js

import Siema from 'siema';

export default ({selector}) => ({
    carousel: new Siema({ 
        selector: selector
    })
})

This is the HTML when I do the first page load, with the adjustments applied by Siema. This works fine:

<div class="container p-4 mx-auto" x-data="carousel({selector:'.carousel1'})">
  <div class="carousel1" style="overflow: hidden; direction: ltr;">
    <div style="width: 4992px; transition: all 200ms ease-out 0s; transform: translate3d(0px, 0px, 0px);">
      <div style="float: left; width: 25%;">
        <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 1</div>
      </div>
      <div style="float: left; width: 25%;">
        <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 2</div>
      </div>
      <div style="float: left; width: 25%;">
        <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 3</div>
      </div>
      <div style="float: left; width: 25%;">
        <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 4</div>
      </div>
    </div>
  </div>
</div>

This is the HTML after I navigate to another page and then back to the carousel page. This doesn't work:

<div class="container p-4 mx-auto" x-data="carousel({selector:'.carousel1'})">
  <div class="carousel1" style="overflow: hidden; direction: ltr;">
    <div style="width: 1248px; transition: all 200ms ease-out 0s; transform: translate3d(0px, 0px, 0px);">
      <div style="float: left; width: 100%;">
        <div style="width: 4992px; transition: all 200ms ease-out 0s; transform: translate3d(0px, 0px, 0px);">
          <div style="float: left; width: 25%;">
            <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 1</div>
          </div>
          <div style="float: left; width: 25%;">
            <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 2</div>
          </div>
          <div style="float: left; width: 25%;">
            <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 3</div>
          </div>
          <div style="float: left; width: 25%;">
            <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Thanks!

Answer 1

I had the same issue and found the problem:

Your script doesn't work because you are starting Alpine before initializing Swup. Swup should be initialized before anything else alters the DOM, like that:

// Swup for page transitions - https://swup.js.org/
import Swup from 'swup';

// Scrollreveal for scrolling animations - https://scrollrevealjs.org/
import ScrollReveal from 'scrollreveal';

// Alpine - https://alpinejs.dev
import Alpine from 'alpinejs'
import carousel from './modules/_carousel.js';


function init() {
  ScrollReveal().reveal('.headline', { duration: 1000, delay:500, viewFactor: 1 });
}

function unload() {
  ScrollReveal().destroy();
}

const swup = new Swup();
swup.on('contentReplaced', init);
swup.on('willReplaceContent', unload);

// Start Alpine *after* initializing Swup and anything will work as expected:
window.Alpine = Alpine
Alpine.data('carousel', carousel);
Alpine.start();

init();