Skip to main content

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 in a contextual frame

In this example the frame is wrapped with a <topwire:context.plugin> view helper. With doing so, TYPO3 does not render the full HTML page anymore, but only the plugin html.

You can verify this, by opening the network panel of your browser, interact with the counter and look at the XHR responses from TYPO3.

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:context.plugin>
    <topwire:turbo.frame id="context_frame">
        <f:render partial="Counter/Plain" arguments="{_all}"/>
    </topwire:turbo.frame>
</topwire:context.plugin>

</html>