Skip to main content
Fluid Primitives

Getting Started

Before you start, please take a look at the core documentation of Fluid Components first.

Installation

Install Fluid Primitives via Composer:

composer require jramke/fluid-primitives

Then you need to add the client-side files. You can either use EXT:fluid_primitives/Resources/Public/JavaScript/dist/or you can just add fluid-primitives to your package.json.

npm install ./vendor/jramke/fluid-primitives

Setup Component Collection

Create a ComponentCollection class in your sitepackage:

<?php

declare(strict_types=1);

namespace MyVendor\MyExt\Components;

use Jramke\FluidPrimitives\Component\AbstractComponentCollection;
use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
use TYPO3Fluid\Fluid\View\TemplatePaths;

final class ComponentCollection extends AbstractComponentCollection
{
    public function getTemplatePaths(): TemplatePaths
    {
        $templatePaths = new TemplatePaths();
        $templatePaths->setTemplateRootPaths([
            ExtensionManagementUtility::extPath('my_ext', 'Resources/Private/Components'),
        ]);
        return $templatePaths;
    }
}

Notice that we did not use the TYPO3Fluid\Fluid\Core\Component\AbstractComponentCollection and instead extended from Jramke\FluidPrimitives\Component\AbstractComponentCollection. This is required to make Fluid Primitives work.

Register Global Namespace

Register the ui namespace for easier component usage:

// ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['ui'][] = 'MyVendor\\MyExt\\Components\\ComponentCollection';

Optional: Component Settings

Provide custom settings that are exposed as {settings} inside the component templates (merged to lib.contentElement.settings).

plugin.tx_fluidprimitives {
    settings {}
}

First Component

Create a button component at Resources/Private/Components/ui/Button/Button.html:

<ui:prop name="variant" type="string" optional="{true}" default="primary" />

<ui:cn value="button button--{variant} {class}" as="class" />

<button class="{class}" {ui:attributes()}>
    <f:slot />
</button>

And use it in your templates like this:

<ui:button variant="secondary" class="another-class" data-test="abc"> Hello World </ui:button>