Weave Code
Ux Swup Laravel Package
symfony/ux-swup
symfony/ux-swup integrates Swup’s AJAX page transitions into Symfony apps, enabling smooth client-side navigation, animated page loads, and preserved JavaScript state with minimal setup. Ideal for adding modern SPA-like transitions to Twig templates.
Swup integration for Symfony
Frequently asked questions about Ux Swup
- Is symfony/ux-swup a Laravel package?
- No. symfony/ux-swup is part of the Symfony UX initiative and is built around Symfony-specific integration points: a Symfony bundle, a Flex recipe, a Twig helper, and a Stimulus controller that boots swup. There is no Blade directive, no Laravel service provider, and no Vite or Livewire wiring. If your stack is Laravel, treat this package as documentation of an approach rather than a dependency you can install.
- Can I install symfony/ux-swup in a Laravel app with Composer?
- Composer will happily install it, but you would be pulling in Symfony runtime conventions such as bundle registration, Flex recipes, and Twig that a Laravel application does not use. None of the package's actual integration surface, namely the Stimulus controller and the Twig function, works out of the box in Blade. The portable piece is the underlying swup JavaScript library, which is framework-agnostic and installable from npm. For a Laravel codebase the honest recommendation is: do not install this package.
- How do I get Swup page transitions in Laravel without this package?
- Install swup from npm, add a small entry point to your Vite config, and initialize it from a Blade layout partial. Then mark the containers swup should swap, typically a main content wrapper, and make sure every page in scope renders the same container IDs. Budget one to three engineer-days, most of which goes to analytics and focus-management hardening rather than the initial setup.
- What does symfony/ux-swup actually add beyond the swup JavaScript library?
- Roughly a hundred lines of glue: it registers the bundle, ships a Flex recipe, exposes a Twig helper, registers a Stimulus controller, and declares the swup JS dependency. The behavior itself, meaning link interception, container swapping, and transition hooks, comes entirely from swup. That small surface is exactly why reproducing the same result in Blade plus Vite is straightforward.
- Does symfony/ux-swup work with Blade, Livewire, or Alpine?
- No. It targets Twig templates and Stimulus controllers, which are Symfony's rendering and JavaScript conventions. Blade, Livewire, and Alpine have no overlap with those integration points, so nothing from the package carries over directly. Laravel's closest equivalents are Livewire's wire:navigate or a hand-rolled swup setup in a Blade layout.
- Will Swup break my analytics pageview tracking in Laravel?
- Yes, this is the classic failure mode. Swup intercepts link clicks and swaps content without a full page load, so your analytics tag fires once on the initial load and never again. Use swup's page:view hook to push virtual pageviews, and verify that Google Tag Manager, GA4, and third-party embeds re-initialize on each transition. Test in production-like conditions before rolling it out app-wide.
- What accessibility issues do AJAX page transitions cause?
- Several: focus is not moved to the new content, screen readers get no announcement that the page changed, scroll restoration can behave inconsistently, and back/forward navigation may serve stale markup. Add explicit focus management on the page:view hook, use an aria-live region to announce route changes, and test with a keyboard and a screen reader. These are product-visible regressions, not library bugs.
- What are the best Laravel alternatives to symfony/ux-swup for SPA-like navigation?
- Livewire's wire:navigate gives you SPA-like navigation with almost no extra work if you already use Livewire. Hotwired Turbo and Inertia.js are the other mainstream options, and htmx covers partial swaps for smaller scopes. If you specifically want swup's animation hooks, install swup from npm and wire it into a Blade layout through Vite.
- How long does it take to add Swup to an existing Laravel app, and how should I roll it out?
- Plan for one to three engineer-days, including analytics and accessibility hardening. Introduce it behind a feature flag on a single low-risk section such as marketing pages or a docs area rather than the authenticated core. Before enabling it, audit templates for consistent container markup, because swup only swaps the containers you declare. Roll out gradually and watch your analytics for pageview gaps.
- Is symfony/ux-swup actively maintained, and what version compatibility should I check?
- It lives under the Symfony organization, which meaningfully lowers abandonment risk compared with a random vendor package, but its install base is tiny at around 33 GitHub stars, so bugs surface later and answers are scarce. It tracks Symfony minor releases, and swup itself has shipped breaking majors from v3 to v4, giving you two version axes to keep aligned. Verify the actual release history on Packagist before treating any release date as a maintenance signal, and check the PHP and Symfony constraints against your own stack.
Weaver
How can I help you explore Laravel packages today?