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

Load frame contents asynchronously

In this example, we do not render the plugin content directly, but use the frame view helper again.

Differently from the previous examples, where the frame wrapped the actual output of a plugin, the HTML inside the frame serves as loading placeholder.

To instruct the frame to load the plugin content asynchronously, we add the src="async" attribute to the frame. By doing so, TYPO3 can cache the whole page again (with the loading placeholder) and sends out proper cache headers, allowing browsers and proxies to cache the full HTML.

This is it so far. Thank you for taking the time to complete this guide. You can find more examples on the Turbo and Topwire pages.

Output

Hello friend!

Tomorrow is: let me calculate that...
Source (Fluid) 
<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.plugin extensionName="TopwireExamples" pluginName="CurrentDate" action="tomorrow">
    <topwire:turbo.frame id="framed_login" src="async" wrapResponse="true">
        <h3>Hello friend!</h3>
        <p>Tomorrow is: <em>let me calculate that...</em></p>
    </topwire:turbo.frame>
</topwire:context.plugin>

</html>