Asset management

The Handlebars extension integrates with TYPO3's Asset collector to manage JavaScript and CSS assets in your frontend rendering. Assets are registered directly through the assets configuration of a HANDLEBARSTEMPLATE content object.

Asset Types

The AssetCollector API supports four distinct asset types, all fully supported by this extension:

External JavaScript files — link to external .js files
Inline JavaScript code — embed JavaScript directly in the page
External CSS files — link to external .css files
Inline CSS code — embed styles directly in the page

JavaScript files

Register external JavaScript files using the javaScript configuration:

10 = HANDLEBARSTEMPLATE
10 {
    templateName = MyTemplate

    assets {
        javaScript {
            my-app-script {
                source = EXT:myext/Resources/Public/JavaScript/app.js
                attributes {
                    async = 1
                    defer = 1
                    crossorigin = anonymous
                }
                options {
                    priority = 1
                    csp = 1
                }
            }
        }
    }
}

Inline JavaScript

Add inline JavaScript code using inlineJavaScript:

assets {
    inlineJavaScript {
        my-inline-script {
            source = console.log('Hello from Handlebars'); initMyApp();
            attributes {
                type = module
            }
            options {
                priority = 1
            }
        }
    }
}

CSS files

Register external stylesheets using the css configuration:

assets {
    css {
        my-styles {
            source = EXT:myext/Resources/Public/Css/styles.css
            attributes {
                media = screen and (max-width: 768px)
            }
            options {
                priority = 1
            }
        }
    }
}

Inline CSS

Add inline styles using inlineCss:

assets {
    inlineCss {
        critical-css {
            source = body { margin: 0; padding: 0; } .container { max-width: 1200px; }
        }
    }
}

Configuration reference

source (required)

Type

string

Description

Asset source. For external files, use EXT: syntax or absolute paths. For inline assets, provide the code directly as a string value.

Note

The source must be a direct string value. Dynamic asset sources via stdWrap are not supported. Use fixed paths or inline code only.

Example

# External JavaScript file
source = EXT:myext/Resources/Public/JavaScript/file.js

# External CSS file
source = EXT:myext/Resources/Public/Css/styles.css

# Inline JavaScript code
source = console.log('Hello');

# Inline CSS code
source = body { margin: 0; }

attributes

Type

array

Description

HTML attributes for the generated tag. Boolean attributes (


        async

,


        defer

,


        disabled

) should be set to

to enable them.

JavaScript attributes

async (boolean): Load script asynchronously
defer (boolean): Defer script execution
nomodule (boolean): Fallback for older browsers
type (string): Script type (e.g., "module")
crossorigin (string): CORS setting (e.g., "anonymous")
integrity (string): Subresource Integrity hash

CSS attributes

media (string): Media query (e.g., "screen", "print")
disabled (boolean): Disable stylesheet
title (string): Stylesheet title
crossorigin (string): CORS setting
integrity (string): Subresource Integrity hash

Example

attributes {
    async = 1
    defer = 1
    type = module
    crossorigin = anonymous
    integrity = sha384-abc123def456
}

options

Type

array

Description

AssetCollector-specific options that control asset rendering behaviour.

Available options

priority (boolean): Render before other assets (default: 0)
csp (boolean): Add CSP nonce attribute (default: 0). Requires TYPO3 v14+.
useNonce (boolean): Add CSP nonce attribute (default: 0). Deprecated since TYPO3 v14 — use csp instead.

Example

options {
    priority = 1
    csp = 1
}