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 Topwire within your TYPO3 project
composer require topwire/topwire:^1.0@dev
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
Within a Fluid template of you plugin,
you can wrap any HTML code with a <turbo‑frame>
tag,
using the builtin view helper.
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.
<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>