PHPackages                             crazy252/typo3\_vite - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. crazy252/typo3\_vite

ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility)

crazy252/typo3\_vite
====================

Vite for Typo3

1.1.7(1y ago)73182[2 issues](https://github.com/crazy252/typo3_vite/issues)GPL-2.0-or-laterPHP

Since Feb 8Pushed 1y ago2 watchersCompare

[ Source](https://github.com/crazy252/typo3_vite)[ Packagist](https://packagist.org/packages/crazy252/typo3_vite)[ RSS](/packages/crazy252-typo3-vite/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (10)Dependencies (1)Versions (7)Used By (0)

Typo3 + Vite.js
===============

[](#typo3--vitejs)

This open source project provides a bridge between Vite.js and Typo3 to make development and deployment of modern web applications easier and more efficient. It allows Typo3 users to leverage the power of Vite.js's fast and modular development experience in their projects. It offers an easy-to-use interface for integrating Vite.js into Typo3 and enables developers to take full advantage of Vite.js's modern features, such as hot module replacement, tree-shaking, and code splitting. It's a perfect way to give your Typo3 project the modern web development experience it deserves!

Setup
-----

[](#setup)

Add a `package.json` file to your extension or add the following dependencies to your file.

```
{
    "name": "extension_name",
    "private": true,
    "version": "0.0.1",
    "scripts": {
        "dev": "vite --host 0.0.0.0",
        "build": "vite build",
        "preview": "vite preview"
    },
    "devDependencies": {
        "vite": "^4.4.11"
    }
}
```

Add a `vite.config.js` file to your extension. If you don't use ddev as environment you can remove the `https` object in the config.

You are free to change the input and output paths and the alias. If you change the paths, you also need to change your paths in the typoscript configuration.

```
import fs from 'fs'
import path from 'path'
import { defineConfig } from 'vite'

/** @type {import('vite').UserConfig} */
const config = {
    server: {
        port: 5173,
        https: {
            key: fs.readFileSync('/etc/ssl/certs/master.key'),
            cert: fs.readFileSync('/etc/ssl/certs/master.crt'),
        }
    },
    base: '',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        manifest: true,
        outDir: 'Resources/Public',
        rollupOptions: {
            input: [
                'Resources/Private/Frontend/main.js',
            ]
        }
    },
    resolve: {
        alias: [
            {
                find: '@',
                replacement: path.resolve(__dirname + '/Resources/Private/Frontend/')
            }
        ]
    },
    plugins: [
        {
            name: 'html',
            handleHotUpdate({file, server}) {
                if (file.endsWith('.html')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*'
                    });
                }
            }
        }
    ]
}

export default defineConfig(config)
```

Extend your TypoScript with your configuration. You can use the template setup in the backend or your `setup.typoscript` file for that.

The port need to be the same as in the `vite.config.js`.

```
plugin.tx_typo3vite.settings.extension_name {
    port = 5173
    out = Resources/Public
    src = Resources/Private/Frontend
}
```

Add the viewhelpers in your page template to use your bundled files. The entry is the filename of the input files from the `vite.config.js`.

```
{namespace vite=Crazy252\Typo3Vite\ViewHelpers}

```

And now it's done. Start the dev server in your extension folder via `yarn dev` or other javascript package managers.

After that, you can view your site with the `?no_cache=1` and you got the full power of vite.js in typo3!

React setup
-----------

[](#react-setup)

If you want to use react in your frontend, you need to add the following viewhelper in your page template.

```

```

Extension setup
---------------

[](#extension-setup)

If you want to change the domain, url, timeout and other settings you can change it via the typoscript setup. Here are the possible settings with the default values.

```
plugin.tx_typo3vite.settings.extension_name {
    out = null                    # path to the output folder
    src = null                    # path to the src folder

    domain = https://127.0.0.1    # default domain of vite server
    port = 3000                   # default port of vite server
    uri = /@vite/client           # default uri for vite client
    timeout = 1.0                 # timeout for dev server check
    verify = false                # ssl certificate verification
}
```

DDEV setup
----------

[](#ddev-setup)

If you use ddev as environment, you need to extend ddev with a port for the vite dev server. Create a file in the `.ddev` folder named `docker-compose.ports.yaml` and add the following content.

```
version: '3.6'

services:
  web:
    ports:
      - "127.0.0.1:5173:5173"
```

###  Health Score

30

—

LowBetter than 61% of packages

Maintenance28

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~125 days

Recently: every ~153 days

Total

6

Last Release

649d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/11686345?v=4)[crazy252](/maintainers/crazy252)[@crazy252](https://github.com/crazy252)

---

Top Contributors

[![crazy252](https://avatars.githubusercontent.com/u/11686345?v=4)](https://github.com/crazy252 "crazy252 (27 commits)")

---

Tags

composertypo3typo3-extensionvitevitejs

### Embed Badge

![Health badge](/badges/crazy252-typo3-vite/health.svg)

```
[![Health](https://phpackages.com/badges/crazy252-typo3-vite/health.svg)](https://phpackages.com/packages/crazy252-typo3-vite)
```

###  Alternatives

[friendsoftypo3/content-blocks

TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML

103574.3k67](/packages/friendsoftypo3-content-blocks)[wazum/sluggi

TYPO3 extension for URL slug management with inline editing, auto-sync, locking, access control, and redirects

40543.5k](/packages/wazum-sluggi)[typo3/cms-scheduler

TYPO3 CMS Scheduler - Schedule tasks to run once or periodically at a specific time.

169.5M266](/packages/typo3-cms-scheduler)[typo3/cms-lowlevel

TYPO3 CMS Lowlevel - Technical analysis of the system. This includes raw database search, checking relations, counting pages and records etc.

178.3M356](/packages/typo3-cms-lowlevel)[typo3/cms-redirects

TYPO3 CMS Redirects - Create manual redirects, list existing redirects and automatically createredirects on slug changes.

167.6M84](/packages/typo3-cms-redirects)[typo3/cms-form

TYPO3 CMS Form - Flexible TYPO3 frontend form framework that comes with a backend editor interface.

147.8M286](/packages/typo3-cms-form)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)