PHPackages stubbornweb/vite-with-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. stubbornweb/vite-with-wordpress ActiveLibrary[Utility & Helpers](/categories/utility) stubbornweb/vite-with-wordpress =============================== A simple, elegant Vite integration for WordPress themes and plugins — inspired by Laravel's Vite helper, providing seamless asset management, HMR support, and production-ready manifest handling. v1.0.1(12mo ago)021[1 PRs](https://github.com/YevheniiVolosiuk/vite-with-wordpress/pulls)MITPHPPHP >=8.0CI passing Since May 18Pushed 1mo ago1 watchersCompare [ Source](https://github.com/YevheniiVolosiuk/vite-with-wordpress)[ Packagist](https://packagist.org/packages/stubbornweb/vite-with-wordpress)[ Docs](https://github.com/yevheniivolosiuk/vite-with-wordpress)[ GitHub Sponsors](https://github.com/YevheniiVolosiuk)[ RSS](/packages/stubbornweb-vite-with-wordpress/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (2)Versions (4)Used By (0) Vite With WordPress =================== [](#vite-with-wordpress) [![Latest Version on Packagist](https://camo.githubusercontent.com/9af99e386deadbcfd4fa7560ef83498244a64ff9d79617f58345cc3aedaec6ba/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f73747562626f726e7765622f766974652d776974682d776f726470726573732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/stubbornweb/vite-with-wordpress)[![Tests](https://camo.githubusercontent.com/b55149796a8537e40114c215b2b1642423e53068873c1728ec0964300fe1cf5e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f79657668656e6969766f6c6f7369756b2f766974652d776974682d776f726470726573732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/yevheniivolosiuk/vite-with-wordpress/actions/workflows/run-tests.yml)[![Total Downloads](https://camo.githubusercontent.com/a9664c017be67656678f77c2b6b583be9e9db519b859c45fd331a85052fccf25/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f79657668656e6969766f6c6f7369756b2f766974652d776974682d776f726470726573732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/yevheniivolosiuk/vite-with-wordpress) A simple, elegant Vite integration for WordPress themes and plugins — inspired by Laravel's Vite helper, providing seamless asset management, HMR support, and production-ready manifest handling. -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [](#a-simple-elegant-vite-integration-for-wordpress-themes-and-plugins--inspired-by-laravels-vite-helper-providing-seamless-asset-management-hmr-support-and-production-ready-manifest-handling) Seamlessly integrate [Vite](https://vitejs.dev/) into your WordPress theme or plugin for fast, modern frontend development with hot module replacement (HMR) and efficient production builds. Why use this? ------------- [](#why-use-this) - Native WordPress support for Vite assets - Automatic dev server detection with HMR support - Manifest-based asset URL resolution for production - Easy static facade: `Vite::asset()` to get asset URLs - Injects `type="module"` on scripts for ES modules support - Supports extracting and enqueuing CSS linked from JS entrypoints --- Required Directory Structure and Naming --------------------------------------- [](#required-directory-structure-and-naming) For the integration to work correctly, **your plugin or theme must have the following directories with exact naming** at the root level: ``` root/ ├── resources/ ├── public/ ``` - `resources/` — Place your source assets here, e.g. `resources/js/main.js`, `resources/scss/style.scss`, etc. - `public/` — This is the build output directory where Vite will place compiled assets, including the `build/` folder and `manifest.json`. ### Important [](#important) - These directories **must exist** and follow the naming convention shown above by default. - If you want to use different directory names or locations, **you must update your `vite.config.js` accordingly** to reflect your custom paths. - For example, change the `base` option and any path aliases in your Vite config to match your folder names. --- Installation ------------ [](#installation) 1. **Clone or install the package into your WordPress theme or plugin folder via composer or copy just 2 classes located in `src/` to your project** ``` composer require stubbornweb/vite-with-wordpress ``` 2. **Set up your Vite project** with your assets inside the theme/plugin directory, e.g. `resources/js/main.js` 3. **Ensure your Vite config outputs assets to `/public/build`** inside your theme/plugin directory 4. \*\*Include PHP classes and `autoload` or simply `require` them into your theme/plugin: ``` // Bootstrap plugin/theme file use StubbornWeb\ViteWithWordPress\Vite; if (file_exists(__DIR__ . '/vendor/autoload.php')) { require_once __DIR__ . '/vendor/autoload.php'; } ``` --- Bootstrap without composer via native PHP ``` // Bootstrap plugin/theme file require_once 'path_to_new_classes/Vite.php' ``` Vite Configuration Example -------------------------- [](#vite-configuration-example) ``` // vite.config.js import path from 'path'; import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ base: '/wp-content/themes/vite-with-wordpress/public/build', plugins: [ laravel({ input: [ 'resources/js/main.js', 'resources/js/plugins/slider.js', ], refresh: [ { paths: ['/**/*.php', '*.php'] } ], }), ], resolve: { alias: { '@styles': path.resolve(__dirname, 'resources/scss'), '@scripts': path.resolve(__dirname, 'resources/js'), '@images': path.resolve(__dirname, 'resources/images'), '@fonts': path.resolve(__dirname, 'resources/fonts'), }, }, server: { host: "0.0.0.0", port: 5173, strictPort: true, cors: { origin: "https://your-local-dev-url.test", credentials: true, }, hmr: { host: "localhost", protocol: "ws", }, }, }); ``` Usage in WordPress ------------------ [](#usage-in-wordpress) ``` use StubbornWeb\ViteWithWordPress\Vite; add_action('wp_enqueue_scripts', function () { // ✅ Recommended: Include "vite" in handle to enable `type="module"` wp_enqueue_script( 'vite-main-script-file', Vite::asset('resources/js/main.js'), ['jquery'], '1.0.0', true ); wp_enqueue_style( 'vite-main-style-file', Vite::asset('resources/js/main.js', 'css'), [], '1.0.0', ); // 🚫 Not recommended if you want `type="module"` automatically // This script will not get the type="module" attribute wp_enqueue_script( 'main-script-file', Vite::asset('resources/js/main.js'), ['jquery'], '1.0.0', true ); }); ``` --- How It Works ============ [](#how-it-works) ### Development mode (npm run dev): [](#development-mode-npm-run-dev) - Detects Vite dev server by checking hot file presence and uses HMR URLs for assets. ### Production mode (npm run build): [](#production-mode-npm-run-build) - Loads manifest.json from public/build/ to resolve hashed filenames for cache-busting. ### Script tag enhancement (type="module"): [](#script-tag-enhancement-typemodule) - By default, Vite assets loaded via wp\_enqueue\_script() will automatically get type="module" injected to support ES modules. - ✅ This behavior only applies if the script handle contains the keyword vite (e.g. vite-main-script-file). - 🚫 If you use a generic or unrelated handle like main-script-file, this enhancement will be skipped to avoid affecting non-Vite scripts. --- API === [](#api) ``` Vite::asset(string $assetPath, string|bool $css = ''): ?string ``` - Returns the full URL of the asset, adapting automatically to dev server or production build. - The second argument ('css' or true) returns the CSS file linked from a JS entrypoint, if available. - Returns null if the asset is unavailable. --- Troubleshooting =============== [](#troubleshooting) - Verify `manifest.json` exists in public/build after running build. - Confirm `hot` file is present during dev server run. - Make sure your WordPress URL and Vite config base & server.cors.origin are correctly set. - Errors related to missing assets will trigger a detailed WordPress error message including suggestions. Contributing ============ [](#contributing) Contributions welcome! Open an issue or pull request to improve the integration. About ===== [](#about) Created and maintained by Yevhenii Volosiuk for modern WordPress development with Vite. Inspired by Laravel. License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 34 — LowBetter than 77% of packages Maintenance72 Regular maintenance activity Popularity3 Limited adoption so far Community11 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 72.4% 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 ~4 days Total 2 Last Release 360d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/c6bfc44af014fdccbea82e0fa47386f286dcf620f294f18d68a21a6e0cfcc1d1?d=identicon)[stubbornweb](/maintainers/stubbornweb) --- Top Contributors [![YevheniiVolosiuk](https://avatars.githubusercontent.com/u/77569229?v=4)](https://github.com/YevheniiVolosiuk "YevheniiVolosiuk (21 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (6 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)") --- Tags wordpressviteStubbornvite-with-wordpressstubbornweb ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/stubbornweb-vite-with-wordpress/health.svg) ``` [![Health](https://phpackages.com/badges/stubbornweb-vite-with-wordpress/health.svg)](https://phpackages.com/packages/stubbornweb-vite-with-wordpress) ``` ### Alternatives [php-stubs/wordpress-stubs WordPress function and class declaration stubs for static analysis. 19013.0M263](/packages/php-stubs-wordpress-stubs)[pentatrion/vite-bundle Vite integration for your Symfony app 2725.3M13](/packages/pentatrion-vite-bundle)[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)