Quickstart

To follow the Quickstart Tutorial you need to set up the extension first.

To get an impression of how it works, you can watch the presentation from TYPO3 Developer Days 2023.

Install

# Install Topwire within your TYPO3 project
composer require topwire/topwire:^1.0@dev

TypoScript

page.includeJSLibs.topwire = EXT:topwire/Resources/Public/JavaScript/topwire.js
page.includeJSLibs.topwire.type = module
page.includeJSLibs.topwire.async = 1
page.includeJSLibs.topwire.defer = 1
page.includeJSLibs.topwire.disableCompression = 1
page.includeJSLibs.topwire.excludeFromConcatenation = 1

Check it out

Back

Wrap sections of your plugin with a Turbo frame

This will capture any link within this frame, prevent a full page navigation by the browser and fetches the contents of the URL via a fetch request.

If you open the network Panel of your browser and press the buttons of the counter example, you'll see that a full HTML document from TYPO3 is fetched via XHR. Nevertheless, only the HTML of the counter frame will be updated.

But why should we render a full HTML page (including menus, header, footer...), when we only need a portion of the page?
Go to the next page of this tutorial to learn how to optimize this.

Output

decrement

0

increment

reset

Source (Fluid)

<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:turbo.frame id="frame_only">
    <f:render partial="Counter/Plain" arguments="{_all}"/>
</topwire:turbo.frame>

</html>