how do I use the swup library on a template with these Laravel links?

Question

I'm working on a project where the template has swup for page transitions. Using the template alone, everything works fine, but after adjusting my links with laravel, it doesn't work. Pages are always reloaded.

<div id="footer-bar" class="footer-bar-1 footer-bar-detached">
    <a href="{{ route('store') }}" class="{{ Route::getCurrentRoute()->getName() === 'store' ? 'active-nav' : '' }} a-link"><i class="bi bi-cart"></i><span>Magasin</span></a>
    <a href="{{ route('statements') }}" class="{{ Route::getCurrentRoute()->getName() === 'statements' ? 'active-nav' : '' }} a-link"><i class="bi bi-graph-up"></i><span>Mes paiements</span></a>
    <a href="{{ route('home') }} " class="circle-nav-2 a-link"><i class="bi bi-house-fill"></i><span>Home</span></a>
    <a href="{{ route('payments.index') }}" class="{{ Route::getCurrentRoute()->getName() === 'payments' ? 'active-nav' : '' }} a-link"><i class="bi bi-receipt"></i><span>Payments</span></a>
    <a href="#" data-bs-toggle="offcanvas" data-bs-target="#menu-sidebar"><i class="bi bi-three-dots"></i><span>More</span></a>
</div>

and swup code in my template

 if(isAJAX === true){
    if(window.location.protocol !== "file:"){
        const options = {
            containers: ["#page"],
            cache:false,
            animateHistoryBrowsing: false,
            plugins: [
                new SwupPreloadPlugin()
            ],
            linkSelector:'a:not(.external-link):not(.default-link):not([href^="https"]):not([href^="http"]):not([data-gallery])'
        };
        const swup = new Swup(options);
        document.addEventListener('swup:pageView',(e) => { init_template(); })
    }
}

Answer 1

Laravel's route helper by default returns absolute urls including the hostname, which, depending on how swup is configured, will bypass swup and load the links directly. The linkSelector in your config includes :not([href^="https"]), basically preventing any absolute urls from being handled by swup even if they match the current origin.

Passing in false for the third optional $absolute parameter will output just the pathname, re-enabling swup for those links.

<a href="{{ route('store', [], false) }}">