PHPackages mrottow/vite-wordpress - 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. mrottow/vite-wordpress ActiveLibrary[Utility & Helpers](/categories/utility) mrottow/vite-wordpress ====================== A collection of back-end utilities for ViteWordpress. v0.1.3(1y ago)1931MITPHP Since Dec 15Pushed 1y ago1 watchersCompare [ Source](https://github.com/mrOttoW/vite-wordpress-php)[ Packagist](https://packagist.org/packages/mrottow/vite-wordpress)[ RSS](/packages/mrottow-vite-wordpress/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (4)Dependencies (4)Versions (5)Used By (0) [ ![vite logo](https://raw.githubusercontent.com/mrOttoW/vite-wordpress/ef6f4b84aa9da549e9908d8c21513d53dfe020bc/vite-logo.svg) ](https://vitejs.dev/)Vite PHP utilities for WordPress ================================ [](#vite-php-utilities-for-wordpress) Backend Utilities for [vite-wordpress](https://github.com/mrOttoW/vite-wordpress) to integrate Vite's development server and HMR into WordPress, as well as manage the manifest file. [![GitHub release](https://camo.githubusercontent.com/0c7e3fd7bdfbe59cd2da0acda68cdc3d453c90b05c085065e14d7d5788608466/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d724f74746f572f766974652d776f726470726573732d706870)](https://camo.githubusercontent.com/0c7e3fd7bdfbe59cd2da0acda68cdc3d453c90b05c085065e14d7d5788608466/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d724f74746f572f766974652d776f726470726573732d706870) [![Packagist Version](https://camo.githubusercontent.com/3c1274d83b710105619088e4580da8e8ac7c301863c1d1bf65a23b72d15e1a1c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d726f74746f772f766974652d776f72647072657373)](https://camo.githubusercontent.com/3c1274d83b710105619088e4580da8e8ac7c301863c1d1bf65a23b72d15e1a1c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d726f74746f772f766974652d776f72647072657373) [![GitHub last commit](https://camo.githubusercontent.com/0df6f37cac1eb0513936e239965e3f0b4b3ce52be0c018742284103b9f1fb2c8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f6d724f74746f572f766974652d776f726470726573732d706870)](https://camo.githubusercontent.com/0df6f37cac1eb0513936e239965e3f0b4b3ce52be0c018742284103b9f1fb2c8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f6d724f74746f572f766974652d776f726470726573732d706870) [![Packagist License](https://camo.githubusercontent.com/9f1295a13bb7175a28f937a930e6d60aaabce435d8c58fdf1795073d4bb7e1e5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d726f74746f772f766974652d776f72647072657373)](https://camo.githubusercontent.com/9f1295a13bb7175a28f937a930e6d60aaabce435d8c58fdf1795073d4bb7e1e5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d726f74746f772f766974652d776f72647072657373) Features -------- [](#features) - **Manifest Resolver:** Parse and manage Vite's manifest file for registering assets in WordPress for production. - **Dev Server & HMR Integration:** Integrates Vite's HMR (Hot Module Replacement) and dev server into WordPress during development. - Supports frontend block development - Supports Elementor editor development - **Automatic Script Injection:** Automatically injects Vite client scripts into WordPress during development. - **Automatic Source Files Injection:** - Automatically changes src urls from enqueued scripts/styles to source files for HMR during development. - Automatically changes render template paths from dynamic blocks in block.json to source files for HMR during development. --- Requirements ------------ [](#requirements) - PHP 7.4 or higher - WordPress 6.0 or higher - A valid ViteJS configuration using [vite-wordpress](https://github.com/mrOttoW/vite-wordpress) --- Installation ------------ [](#installation) 1. Add the library to your project: ``` composer require mrottow/vite-wordpress ``` 2. Include the autoloader in your WordPress theme or plugin: ``` require_once __DIR__ . '/vendor/autoload.php'; ``` --- Usage ----- [](#usage) ### Dev Server [](#dev-server) The `DevServer` class integrates the Vite development server with WordPress for HMR. #### Example (uses default settings): [](#example-uses-default-settings) ``` (new ViteWordPress\DevServer())->register(); ``` #### With custom settings: [](#with-custom-settings) ``` (new ViteWordPress\DevServer()) ->set_server_port(5173) ->set_server_host('localhost') ->register(); ``` When using the [vite-wordpress](https://github.com/mrOttoW/vite-wordpress) ViteJS plugin, if files have been built using `vite build`, are enqueued and the development server is running via the `vite` command: 1. DevServer automatically detects all enqueued scripts & templates from the project through hooks & `vite-wordpress` server configurations. 2. It resolves scripts to source files served by the development server. 3. It resolves templates to source files from the `srcDir` folder. 4. It updates script tags from the project to use as modules and injects Vite's client to enable HMR (Hot Module Replacement). 5. Using Vite's client and module support, it can also include CSS source files that are imported into JavaScript files. It works for both JS and CSS entries. It's compatible with a traditional setup with [vite-wordpress](https://github.com/mrOttoW/vite-wordpress) without the need for a manifest or hashed files. However, when using a manifest, the Manifest Resolver will assist in resolving the files through the manifest offering better precision for a more complex assets folder & file structure. ### Manifest Resolver [](#manifest-resolver) The `ManifestResolver` class handles reading and accessing the Vite manifest file and additionally integrates into the dev server. You can use the `ManifestResolver` instance, which needs to be wrapped in a function or helper class to work within hooks. Alternatively, you can use the `Manifest` facade, which handles this for you. #### Example using the facade: [](#example-using-the-facade) ``` use ViteWordPress\DevServer; use ViteWordPress\Manifest; $manifest = Manifest::create( 'absolute/path/to/manifest.json' ); // Also works with a PHP manifest file. // When using the dev server you need to include the manifest. ( new DevServer( $manifest ) )->register(); // Enqueue scripts hook. add_action( 'wp_enqueue_scripts', function () { $file_name = Manifest::get_file( 'app.js' ); wp_enqueue_script( 'my-app', get_stylesheet_directory() . "build/{$file_name}" ); } ); ``` #### Example using the instance: [](#example-using-the-instance) ``` use ViteWordPress\DevServer; use ViteWordPress\ManifestResolver; function manifest() { static $manifest; if ( ! isset( $manifest ) ) { $manifest = new ManifestResolver(); $manifest->set_manifest( 'absolute/path/manifest.json' ); // Also works with a PHP manifest file. } return $manifest; } // When using the dev server you need to include the manifest. ( new DevServer( manifest() ) )->register(); // Enqueue scripts hook. add_action( 'wp_enqueue_scripts', function () { $file_name = manifest()->get( 'app.js' )['file']; wp_enqueue_script( 'my-app', get_stylesheet_directory() . "build/{$file_name}" ); } ); ``` The manifest resolver is built off an interface so you're able to create your own implementation to include into the dev server. --- Configuration ------------- [](#configuration) ### ManifestResolver [](#manifestresolver) MethodDefaultDescription`set_manifest($path)```Sets the path to the `manifest.json` or `manifest.php` file.`set_src($dir)``'src'`(optional) Sets the source directory for the assets.### DevServer [](#devserver) MethodDefaultDescription`set_server_host($host)``get_site_url()`(optional) Sets the Vite dev server host.`set_server_port($port)``5173`(optional) Sets the Vite dev server port.`set_client_hook($priority)``5`(optional) Sets the priority for the Vite client hook.--- Example ------- [](#example) An example within a WordPress plugin can be found here: ### Health Score 24 — LowBetter than 32% of packages Maintenance40 Moderate activity, may be stable Popularity13 Limited adoption so far Community8 Small or concentrated contributor base Maturity31 Early-stage or recently created project 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 ~3 days Total 4 Last Release 508d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/cbacca7432dbba96a210632cd99e5bc50ea9ac15218115381df8226f33ad1326?d=identicon)[mrOttoW](/maintainers/mrOttoW) --- Top Contributors [![mrOttoW](https://avatars.githubusercontent.com/u/190752350?v=4)](https://github.com/mrOttoW "mrOttoW (26 commits)") --- Tags phpvitevitejswordpresswordpressvitevitejswordpress vite ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/mrottow-vite-wordpress/health.svg) ``` [![Health](https://phpackages.com/badges/mrottow-vite-wordpress/health.svg)](https://phpackages.com/packages/mrottow-vite-wordpress) ``` ### Alternatives [pentatrion/vite-bundle Vite integration for your Symfony app 2725.3M13](/packages/pentatrion-vite-bundle)[php-stubs/wordpress-stubs WordPress function and class declaration stubs for static analysis. 19013.0M263](/packages/php-stubs-wordpress-stubs)[idleberg/wordpress-vite-assets Injects assets from a Vite manifest to the Wordpress head, supports themes and plugins 14816.4k1](/packages/idleberg-wordpress-vite-assets)[wpsitecare/carelib A collection of helpful functions to make creating an awesome theme more enjoyable. 164.6k](/packages/wpsitecare-carelib)[bostondv/bootstrap-ninja-forms Adds Bootstrap classes to Ninja Forms 222.2k](/packages/bostondv-bootstrap-ninja-forms) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)