How to Use Symfony UX Turbo with WebpackEncore

Installation

After installing Symfony UX Turbo, install your assets and restart Encore:

1
2

$ npm install --force
$ npm run watch

Reloading When a JavaScript/CSS File Changes

Turbo Drive can automatically perform a full refresh if the content of one of your CSS or JS files changes, to ensure that your users always have the latest version.

First, verify that you have versioning enabled so that your filenames change when the file contents change:

1
2
3
4
5

// webpack.config.js

Encore.
    // ...
    .enableVersioning(Encore.isProduction())

Then add a data-turbo-track="reload" attribute to all of your script and link tags:

1
2
3
4
5
6
7
8
9

# config/packages/webpack_encore.yaml
webpack_encore:
    # ...

    script_attributes:
        defer: true
        'data-turbo-track': reload
    link_attributes:
        'data-turbo-track': reload

For more info, see: Turbo Reloading When Assets Change.