Installation
Vite AssetCollector can be installed with composer:
composer req praetorius/vite-asset-collectorVite and the TYPO3 plugin can be installed with the frontend package manager of your choice:
npm install --save-dev vite vite-plugin-typo3Make sure to execute this inside of your DDEV container if you want to use the DDEV add-on afterwards.
pnpm add --save-dev vite vite-plugin-typo3Make sure to execute this inside of your DDEV container if you want to use the DDEV add-on afterwards.
yarn add --dev vite vite-plugin-typo3Make sure to execute this inside of your DDEV container if you want to use the DDEV add-on afterwards.
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. in the root of
your project to activate the TYPO3 plugin:
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
Vite uses so-called entrypoints, which are your frontend source files you want to process and bundle with vite. For each extension, you can define one or multiple Vite entrypoints in a json file:
[
"../Resources/Private/Styles.entry.css",
"../Resources/Private/Main.entry.js"
]It is also possible to define a glob pattern like this: "../. Inside
of each entrypoint file you can import all frontend assets you want to bundle.
Then you can use the included ViewHelper to embed your assets. If you use the default configuration, you only need to specify your entrypoint.
<html
data-namespace-typo3-fluid="true"
xmlns:vite="http://typo3.org/ns/Praetorius/ViteAssetCollector/ViewHelpers"
>
...
<vite:asset entry="EXT:sitepackage/Resources/Private/Styles.entry.css" />
<vite:asset 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-.
For DDEV v1.23.5 or above run:
ddev add-on get s2b/ddev-vite-sidecar
ddev restartFor earlier versions of DDEV run:
ddev get s2b/ddev-vite-sidecar
ddev restartThen you can start the server inside DDEV:
ddev viteFor 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:
$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 vitePrerequisite is a local node setup and installed dependencies outside of Docker setups.
$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 vitePrerequisite is a local node setup and installed dependencies outside of Docker setups.
$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 viteBuild for Production
During deployment, the following command builds static asset files that can be used in Production:
npm exec vite buildpnpm exec vite buildyarn exec vite -- buildNext Steps
Project Structure
Learn about the ideal TYPO3 folder structure when using Vite in your project
CSS Preprocessors
Learn how to setup the CSS preprocessor of your choice with Vite