Professional Content Management

Free and open source, TYPO3 CMS is the most widely used enterprise-level CMS.

Test TYPO3 now:

TYPO3 live demo

Inspire people to share

Offer your skills and contribute to the project. The community is growing and does more than just coding. 

A Community Effort

TYPO3 CMS is an Open Source project managed by the TYPO3 Association.

The Project

Do you have a question?

Ask the community or a professional partner.

Components Have Landed in Fluid

Categories: Budget idea, Development, TYPO3 CMS Created by Simon Praetorius
A mason jar filled with a bright orange iced drink with large pieces of fruit, garnished with lemon slices and two straws, sits on a wooden surface with white blossoms beside it and a blurred blue background.
Original photo: Fotios Photos / Pexels
Thanks to a funded budget idea from Simon Praetorius, Fluid now supports components — reusable custom tags that make your templates cleaner and easier to work with. In this article, Simon shares an update on his work and what this new feature means for TYPO3 developers.

How Components Came to Fluid

Back in February, I submitted the budget idea for Component-Based Frontend Development with Fluid, which was selected. I was very happy that you selected my idea for Q2, which allowed me to spend a lot of time on open source development over the last three months. Now the result is here: Fluid 4.3 has been released, Components have officially landed in Fluid.

What Are Components?

Fluid’s components are custom HTML-like tags based on Fluid templates that you can reuse throughout your project. The concept is similar to popular frontend frameworks like React and Vue or native Web Components, but they are server-rendered by PHP.

<my:teaserCard
    title="TYPO3"
    link="https://typo3.org"
    icon="typo3"
>
the Professional, Flexible Content Management System
</my:teaserCard>

Working With Components

Components use the existing ViewHelper syntax you are already familiar with. However, it is not necessary to write PHP code to create a component. Instead, Fluid internally routes the ViewHelper tag directly to a template file, where you define the component’s arguments — directly in Fluid.

<f:argument name="title" type="string" />
<f:argument name="link" type="string" />
<f:argument name="icon" type="string" optional="{true}" />

Why Components Matter

Components introduce a modern, component-based workflow that makes your frontend and integration work more modular, consistent and maintainable. This approach improves collaboration between different crafts, such as frontend and backend developers, by providing clear integration APIs.

Get Started With Components

You can start using components today in your Composer-based TYPO3 v13 projects by updating to the latest Fluid version. Non-Composer projects will have to wait a bit longer, because the latest Fluid release needs to be integrated into TYPO3 first.

I’ve also invested a lot of time in the documentation. A good place to start is the new chapter on Components in Fluid Explained.

Share Your Feedback

I’d love to hear your thoughts! Join the discussion in #typo3-fluid on Slack, or open an issue on GitHub if you find a bug.

I hope you will enjoy the new component capabilities of Fluid!

Additional contributors for this article

Related News

Latest news

Show more