Download the PHP package larsgowebdev/vite-asset-collector-wp without Composer
On this page you can find all versions of the php package larsgowebdev/vite-asset-collector-wp. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download larsgowebdev/vite-asset-collector-wp
More information about larsgowebdev/vite-asset-collector-wp
Files in larsgowebdev/vite-asset-collector-wp
Package vite-asset-collector-wp
Short Description WordPress plugin for collecting and injecting Vite assets
License GPL-2.0-or-later
Informations about the package vite-asset-collector-wp
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 for TYPO3, which made this project possible.
Features
- CSS/SCSS/JS live reloading in development
- Optimized asset loading in production
- Automatic environment detection
- Comprehensive error handling and debugging
Requirements
- PHP 8.1 or higher & Composer
- WordPress 6.0 or higher
- Node.js 18+
- Vite 5.3 or higher
- Roots/wp-config
Recommendations for local Development
- Docker
- DDEV 1.23 and higher
- ddev-viteserve for integration of Vite's dev server into DDEV
- vite-plugin-auto-origin for auto configuration of vite server origin url
Installation
As WordPress(Bedrock) 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.
Configuration
Environment Variables
Create a .env
file in your WordPress root directory with the following variables:
Configuration requires an .env file based configuration, based on roots/wp-config and oscarotero/env. It should be required by default in a Bedrock project.
Theme Integration
In your theme's functions.php
:
Vite Configuration
Example vite.config.js
:
Usage
Development Mode
-
Start your Vite dev server:
- The plugin will automatically detect development mode and inject HMR scripts.
Production Mode
-
Build your assets:
- The plugin will automatically load optimized assets from the manifest file.
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:
Enable DDEV Vite-Serve
The ddev-viteserve plugin integrates your Vite dev-server into your environment. Simply install it like this and restart your box:
Then you can run your dev server like this:
And to stop it:
Most importantly, the viteserve plugin sets the port it uses as environment variable:
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: https://github.com/s2b/vite-asset-collector
- Original Author: Simon Praetorius (https://github.com/s2b)
We thank the original author and contributors for their work, which served as the foundation for this WordPress adaptation.
License
This project is licensed under the GNU General Public License v2.0 - see the 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.