PHPackages                             larsgowebdev/vite-asset-collector-wp - 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. larsgowebdev/vite-asset-collector-wp

ActiveWordpress-muplugin[Utility & Helpers](/categories/utility)

larsgowebdev/vite-asset-collector-wp
====================================

WordPress plugin for collecting and injecting Vite assets

0.5.2(1y ago)0139GPL-2.0-or-laterPHPPHP >=8.1

Since Oct 31Pushed 1y ago1 watchersCompare

[ Source](https://github.com/larsgowebdev/vite-asset-collector-wp)[ Packagist](https://packagist.org/packages/larsgowebdev/vite-asset-collector-wp)[ RSS](/packages/larsgowebdev-vite-asset-collector-wp/feed)WikiDiscussions production Synced 1mo ago

READMEChangelogDependencies (2)Versions (5)Used By (0)

Vite Asset Collector for WordPress
==================================

[](#vite-asset-collector-for-wordpress)

A WordPress Must-Use Plugin that seamlessly integrates Vite.js with WordPress themes, with live reload support for development and optimized asset loading for production.

This is heavily inspired by [vite-asset-collector](https://github.com/s2b/vite-asset-collector) for TYPO3, which made this project possible.

Features
--------

[](#features)

- CSS/SCSS/JS live reloading in development
- Optimized asset loading in production
- Automatic environment detection
- Comprehensive error handling and debugging

Requirements
------------

[](#requirements)

- PHP 8.1 or higher & Composer
- WordPress 6.0 or higher
- Node.js 18+
- Vite 5.3 or higher
- [Roots/wp-config](https://github.com/roots/wp-config)

Recommendations for local Development
-------------------------------------

[](#recommendations-for-local-development)

- Docker
- [DDEV](https://ddev.com/) 1.23 and higher
- [ddev-viteserve](https://github.com/torenware/ddev-viteserve) for integration of Vite's dev server into DDEV
- [vite-plugin-auto-origin](https://github.com/s2b/vite-plugin-auto-origin) for auto configuration of vite server origin url

Installation
------------

[](#installation)

### As WordPress(Bedrock) dependency

[](#as-wordpressbedrock-dependency)

In a composer based setup with Bedrock, this plugin will be automatically symlinked into your web/app/mu-plugins directory, and become available in your WP.

```
composer require larsgowebdev/vite-asset-collector-wp
```

Configuration
-------------

[](#configuration)

### Environment Variables

[](#environment-variables)

Create a `.env` file in your WordPress root directory with the following variables:

```
# WordPress Environment Type ('development', 'production', 'staging', etc.)
WP_ENVIRONMENT_TYPE=development

# WordPress base URL
WP_HOME=http://localhost  # Your WordPress installation URL

# Vite Configuration
VITE_USE_DEV_SERVER=auto  # 'auto', 'true', or 'false'
VITE_DEV_SERVER_URI=auto  # 'auto' or specific URI
```

Configuration requires an .env file based configuration, based on [roots/wp-config](https://github.com/roots/wp-config) and [oscarotero/env](https://github.com/oscarotero/env). It should be required by default in a Bedrock project.

### Theme Integration

[](#theme-integration)

In your theme's `functions.php`:

```
use Larsgowebdev\ViteAssetCollectorWp\ViteAssetCollector;
use Larsgowebdev\ViteAssetCollectorWp\Exception\ViteException;
use Larsgowebdev\ViteAssetCollectorWp\ErrorHandler\ViteErrorHandler;

try {
    $vite = new ViteAssetCollector(
        '/.vite/manifest.json',  // Path to manifest relative to theme
        'frontend/vite.entry.js' // Entry point path
    );
    $vite->injectViteAssets();
} catch (ViteException $e) {
    (new ViteErrorHandler())->handleError($e);
}
```

### Vite Configuration

[](#vite-configuration)

Example `vite.config.js`:

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

/*
 * universal constant configuration
 */
const ROOT_PATH = "./"
const currentDir = dirname(fileURLToPath(import.meta.url))
const rootPath = resolve(currentDir, ROOT_PATH)

const ALIASES = {
    '@Images': resolve(__dirname, 'path/to/my/frontend/src/images'),
    '@Fonts': resolve(__dirname, 'path/to/my/frontend/src/fonts'),
}

const ENTRY_POINTS = [
    "path/to/my/frontend/src/vite.entry.js",
]

const BUILD_PATH = "path/to/my/theme/assets/dist/"

/*
 * the actual config definition for vite.
 * Note that 'mode' is a parameter coming from cli/node (see package.json)
 */
export default defineConfig(() => {
    return {
        base: "",
        resolve: {
            alias: ALIASES
        },
        build: {
            manifest: true,
            rollupOptions: {
                input: ENTRY_POINTS.map(entry => resolve(rootPath, entry)),
            },
            outDir: resolve(rootPath, BUILD_PATH),
        },
        css: {
            devSourcemap: true,
        },
        plugins: [
            autoOrigin(),
            watchFiles(),
        ],
        publicDir: false,
    }
});
```

Usage
-----

[](#usage)

### Development Mode

[](#development-mode)

1. Start your Vite dev server:

```
npm run dev
```

2. The plugin will automatically detect development mode and inject HMR scripts.

### Production Mode

[](#production-mode)

1. Build your assets:

```
npm run build
```

2. The plugin will automatically load optimized assets from the manifest file.

### Enabling file watchers in Vite

[](#enabling-file-watchers-in-vite)

To enable watching files for changes and live reloading in your dev environment, you can add a little Vite Plugin:

```
/*
 * Define a custom file watcher in vite plugin syntax
 * Will trigger a "hot update" (without full reload) when files are changed
 */
const watchFiles = () => ({
    name: 'watch-files',
    handleHotUpdate({file, server}) {
        const watchedExtensions = [
            // adjust for your desired extensions
            '.html',
            '.twig',
            '.php',
            '.scss',
            '.js',
            '.jpg',
            '.png',
            '.svg',
        ];
        if (watchedExtensions.some(ext => file.endsWith(ext))) {
            server.ws.send({
                type: 'full-reload',
                path: '*'
            });
        }
    }
})

export default defineConfig(() => {
    return {
        // other Options...
        plugins: [
            autoOrigin(),
            watchFiles(),
        ],
    }
});
```

Enable DDEV Vite-Serve
----------------------

[](#enable-ddev-vite-serve)

The [ddev-viteserve](https://github.com/torenware/ddev-viteserve) plugin integrates your Vite dev-server into your environment. Simply install it like this and restart your box:

```
ddev get torenware/ddev-viteserve
ddev restart
```

Then you can run your dev server like this:

```
ddev vite-serve
```

And to stop it:

```
ddev vite-serve stop
```

Most importantly, the viteserve plugin sets the port it uses as environment variable:

```
VITE_PRIMARY_PORT=5173
VITE_SECONDARY_PORT=5273
```

Credits
-------

[](#credits)

This WordPress plugin is an adaptation of the "Vite Asset Collector" extension for TYPO3 CMS, originally created by Simon Praetorius. The original project can be found at:

- Original Project:
- Original Author: Simon Praetorius ()

We thank the original author and contributors for their work, which served as the foundation for this WordPress adaptation.

License
-------

[](#license)

This project is licensed under the GNU General Public License v2.0 - see the [LICENSE](LICENSE) file for details.

This software is partly derived from "Vite Asset Collector" for TYPO3, which is also licensed under GPL-2.0. As per the GPL-2.0 terms, this derivative work maintains the same license.

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance38

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity40

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 ~0 days

Total

4

Last Release

558d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5acfe664cb331e88e051b4702323a39ac011b88183fb1237c7904035cb59c9a9?d=identicon)[larsgowebdev](/maintainers/larsgowebdev)

---

Top Contributors

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

### Embed Badge

![Health badge](/badges/larsgowebdev-vite-asset-collector-wp/health.svg)

```
[![Health](https://phpackages.com/badges/larsgowebdev-vite-asset-collector-wp/health.svg)](https://phpackages.com/packages/larsgowebdev-vite-asset-collector-wp)
```

###  Alternatives

[roots/bedrock

WordPress boilerplate with Composer, easier configuration, and an improved folder structure

6.5k441.8k2](/packages/roots-bedrock)[thefrosty/wp-utilities

A library containing my standard development resources

1715.7k15](/packages/thefrosty-wp-utilities)[bitpoke/stack-mu-plugin

WordPress must-use plugin for Stack

1219.5k](/packages/bitpoke-stack-mu-plugin)

PHPackages © 2026

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