Symfony UX Turbo ================ Symfony UX Turbo is a Symfony bundle integrating the `Hotwire Turbo`_ library in Symfony applications. It is part of `the Symfony UX initiative`_. Symfony UX Turbo allows having the same user experience as with `Single Page Applications`_ but without having to write a single line of JavaScript! Symfony UX Turbo also integrates with `Symfony Mercure`_ or any other transports to broadcast DOM changes to all currently connected users! You're in a hurry? Take a look at :ref:`the chat example ` to discover the full potential of Symfony UX Turbo. Or watch the `Turbo Screencast on SymfonyCasts`_. Installation ------------ .. caution:: Before you start, make sure you have `StimulusBundle configured in your app`_. Install the bundle using Composer and Symfony Flex: .. code-block:: terminal $ composer require symfony/ux-turbo If you're using WebpackEncore, install your assets and restart Encore (not needed if you're using AssetMapper): .. code-block:: terminal $ npm install --force $ npm run watch # or use yarn $ yarn install --force $ yarn watch Usage ----- Accelerating Navigation with Turbo Drive ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Turbo Drive enhances page-level navigation. It watches for link clicks and form submissions, performs them in the background, and updates the page without doing a full reload. This gives you the "single-page-app" experience without major changes to your code! Turbo Drive is automatically enabled when you install Symfony UX Turbo. And while you don't need to make major changes to get things to work smoothly, there are 3 things to be aware of: 1. Make sure your JavaScript is Turbo-ready ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Because navigation no longer results in full page refreshes, you may need to adjust your JavaScript to work properly. The best solution is to write your JavaScript using `Stimulus`_ or something similar. We also recommend that you place your ``script`` tags inside your ``head`` tag so that they aren't reloaded on every navigation (Turbo re-executes any ``script`` tags inside ``body`` on every navigation). Add a ``defer`` attribute to each ``script`` tag to prevent it from blocking the page load. See `Moving