---
title: "Configuration"
manual: "Vite AssetCollector"
version: "main"
permalink: "https://docs.typo3.org/permalink/praetorius/vite-asset-collector:configuration@main"
source: "Configuration/Index.rst"
rendered: "2026-09-20T09:42:55+00:00"
---

# Configuration {#configuration}

If you use the default setup, no configuration should be necessary.
However, you can customize almost everything to create your individual
development setup.

## Adjust Vite Dev Server {#configuration-devserver}

The extension has two configuration options to setup the Vite dev server.
By default, both are set to `auto`, which means:

-   Dev server will only be used in `Development` context
-   Dev server uri will be determined automatically for environments with
    [vite-sidecar](https://github.com/s2b/ddev-vite-sidecar) or
    [vite-serve for DDEV](https://github.com/torenware/ddev-viteserve) set up

You can adjust both options in your `$TYPO3_CONF_VARS`, for example:

**config/system/additional.php**

```php
// Setup Vite dev server based on configuration in .env file
// TYPO3_VITE_DEV_SERVER='https://localhost:1234'
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['vite_asset_collector']['useDevServer'] = (bool) getenv('TYPO3_VITE_DEV_SERVER');
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['vite_asset_collector']['devServerUri'] = (string) getenv('TYPO3_VITE_DEV_SERVER');
```

## Change Location of manifest.json {#configuration-manifest}

You can specify the path to Vite's `manifest.json` in the extension configuration.
By default, this is set to `_assets/vite/.vite/manifest.json`, so it will run
out-of-the-box with Vite 5 and the Vite TYPO3 plugin.

If you still use Vite < 5, you should change this to `_assets/vite/manifest.json`.

**config/system/additional.php**

```php
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['vite_asset_collector']['defaultManifest'] = 'EXT:sitepackage/Resources/Public/Vite/.vite/manifest.json';
```

If you change the path here, please be aware that you may need to adjust `outDir` in
your `vite.config.js` as well:

**vite.config.js**

```javascript
export default defineConfig({
    // ...
    build: {
        // ...
        outDir: 'path/to/sitepackage/Resources/Public/Vite/',
    }
})
```

## Manual Vite Configuration {#configuration-vite-manual}

If you don't want or can't use the [Vite plugin](https://github.com/s2b/vite-plugin-typo3/), you can configure
Vite yourself to work together with the TYPO3 extension. In that case, it is highly recommended to install
`vite-plugin-auto-origin`:

**npm**

```sh
npm install --save-dev vite-plugin-auto-origin
```

**pnpm**

```sh
pnpm add --save-dev vite-plugin-auto-origin
```

**yarn**

```sh
yarn add --dev vite-plugin-auto-origin
```

The manual Vite configuration could look something like this:

**vite.config.js**

```javascript
import { defineConfig, defaultAllowedOrigins } from "vite"
import { dirname, resolve } from "node:path"
import { fileURLToPath } from "node:url"
import autoOrigin from "vite-plugin-auto-origin"

// TYPO3 root path (relative to this config file)
const VITE_TYPO3_ROOT = "./";

// Vite input files (relative to TYPO3 root path)
const VITE_ENTRYPOINTS = [

];

// Output path for generated assets
const VITE_OUTPUT_PATH = "public/_assets/vite/";

const currentDir = dirname(fileURLToPath(import.meta.url));
const rootPath = resolve(currentDir, VITE_TYPO3_ROOT);
export default defineConfig({
    base: "",
    server: {
        allowedHosts: [".ddev.site"],
        cors: {
            origin: [defaultAllowedOrigins, /^https?:\/\/.*\.ddev\.site(:\d+)?$/],
        },
    },
    build: {
        manifest: true,
        rollupOptions: {
            input: VITE_ENTRYPOINTS.map(entry => resolve(rootPath, entry)),
        },
        outDir: resolve(rootPath, VITE_OUTPUT_PATH),
    },
    css: {
        devSourcemap: true,
    },
    plugins: [ autoOrigin() ],
    publicDir: false,
});
```

You can also [create aliases yourself](https://vitejs.dev/config/shared-options.html#resolve-alias) to
refer to other assets in CSS files:

**vite.config.js**

```javascript
//...
export default defineConfig({
    // ...
    resolve: {
        alias: [
            { find: "@frontend", replacement: resolve(currentDir, "frontend/") }
        ]
    }
});
```