Installation

Vite AssetCollector can be installed with composer:

composer req praetorius/vite-asset-collector

Vite and the TYPO3 plugin can be installed with the frontend package manager of your choice:

npm install --save-dev vite vite-plugin-typo3

pnpm add --save-dev vite vite-plugin-typo3

yarn add --dev vite vite-plugin-typo3

Getting Started

Follow these steps to get a basic Vite setup for your frontend assets in a sitepackage extension.

Vite Setup

To get things started, you need to create a vite.config.js in the root of your project to activate the TYPO3 plugin:

vite.config.js

import { defineConfig } from "vite";
import typo3 from "vite-plugin-typo3";

export default defineConfig({
    plugins: [typo3()],
});

For more information about the Vite plugin, have a look at its dedicated documentation.

TYPO3 Setup

For each extension, you can define one or multiple Vite entrypoints in a json file:

sitepackage/Configuration/ViteEntrypoints.json

[
    "../Resources/Private/Main.entry.js"
]

It is also possible to define a glob pattern like this: "../Resources/Private/*.entry.{js,ts}".

Then you can use the included ViewHelper to embed your assets. If you use the default configuration, you only need to specify your entrypoint.

Layouts/Default.html

<html
    data-namespace-typo3-fluid="true"
    xmlns:vac="http://typo3.org/ns/Praetorius/ViteAssetCollector/ViewHelpers"
>

...

<vac:asset.vite entry="EXT:sitepackage/Resources/Private/Main.entry.js" />

Start Vite Server

For local development, you need a running Vite server that serves your frontend assets alongside the normal webserver. On production systems, this is no longer necessary.

First, TYPO3 needs to run in Development context for the extension to recognize the correct mode automatically.

You have several options to run the dev server:

Prerequisite is an add-on for DDEV called ddev-vite-sidecar:

ddev add-on get s2b/ddev-vite-sidecar
ddev restart

Then you can start the server inside DDEV:

ddev vite

For more information about the add-on, have a look at its dedicated documentation.

Prerequisite is a local node setup and installed dependencies outside of Docker setups. Also, you need to configure the extension to use the correct server url:

config/system/additional.php

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['vite_asset_collector']['devServerUri'] = 'http://localhost:5173';

Then you can start the server, which usually launches on port 5173:

npm exec vite

Prerequisite is a local node setup and installed dependencies outside of Docker setups.

config/system/additional.php

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['vite_asset_collector']['devServerUri'] = 'http://localhost:5173';

Then you can start the server, which usually launches on port 5173:

pnpm exec vite

Prerequisite is a local node setup and installed dependencies outside of Docker setups.

config/system/additional.php

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['vite_asset_collector']['devServerUri'] = 'http://localhost:5173';

Then you can start the server, which usually launches on port 5173:

yarn exec vite

Build for Production

During deployment, the following command builds static asset files that can be used in Production:

npm exec vite build

pnpm exec vite build

yarn exec vite -- build