Asset ViewHelper <vite:uri>

The vite:uri ViewHelper extracts the uri to one specific asset file from a vite manifest file. If the dev server is used, the dev server uri to the resource is returned.

Example

This can be used to preload certain assets in the HTML <head> tag.

First, add a Fluid template to your TypoScript setup, for example:

page.headerData {
    10 = FLUIDTEMPLATE
    10 {
        file = EXT:sitepackage/Resources/Private/Templates/HeaderData.html
    }
}
Copied!

Then create the HeaderData template:

EXT:sitepackage/Resources/Private/Templates/HeaderData.html 
<html
    data-namespace-typo3-fluid="true"
    xmlns:vite="http://typo3.org/ns/Praetorius/ViteAssetCollector/ViewHelpers"
>

<link
    rel="preload"
    href="{vite:uri(file: 'EXT:sitepackage/Resources/Private/Fonts/webfont.woff2')}"
    as="font"
    type="font/woff2"
    crossorigin
/>

</html>
Copied!

Arguments

The following arguments are available for the uri ViewHelper:

file

file
Type
string
Required
1
Identifier of the desired asset file for which a uri should be generated

manifest

manifest
Type
string
Path to vite manifest file; if omitted, default manifest from extension configuration will be used instead