1. Go to this page and download the library: Download wp-spaghetti/wp-vite library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
wp-spaghetti / wp-vite example snippets
use WpSpaghetti\WpVite\Vite;
// For plugins
Vite::init(
plugin_dir_path(__FILE__), // Base path
plugin_dir_url(__FILE__), // Base URL
'1.0.0' // Version
);
// For themes
Vite::init(
get_template_directory() . '/',
get_template_directory_uri() . '/',
wp_get_theme()->get('Version')
);
// These all work automatically:
Vite::enqueueScript('modal', 'js/components/modal'); // No .jsx extension needed
Vite::enqueueStyle('admin', 'css/admin/dashboard'); // Finds .scss, .sass, or .css
Vite::enqueueScript('utils', 'js/utils/helpers'); // Auto-detects .ts or .js
// Auto-detect component name from path
Vite::init(
plugin_dir_path(__FILE__),
plugin_dir_url(__FILE__),
'1.0.0'
);
// Explicit component name
Vite::init(
plugin_dir_path(__FILE__),
plugin_dir_url(__FILE__),
'1.0.0',
'my-custom-plugin'
);
/*
Plugin Name: My Awesome Plugin
*/
use WpSpaghetti\WpVite\Vite;
// Initialize on plugin load
add_action('init', function() {
Vite::init(
plugin_dir_path(__FILE__),
plugin_dir_url(__FILE__),
'1.2.3'
);
});
// Enqueue frontend assets
add_action('wp_enqueue_scripts', function() {
Vite::enqueueScript('my-plugin-app', 'js/app', ['jquery']);
Vite::enqueueStyle('my-plugin-styles', 'css/main');
});
// Enqueue admin assets
add_action('admin_enqueue_scripts', function() {
if (Vite::jsExists('js/admin')) {
Vite::enqueueScript('my-plugin-admin', 'js/admin');
}
});
// Add dev scripts in development
add_action('wp_head', function() {
if (WP_DEBUG) {
Vite::devScripts();
}
});
// In wp-config.php
// Basic Vite configuration
define('VITE_DEV_SERVER_ENABLED', true);
define('VITE_SERVER_HOST', 'localhost');
define('VITE_SERVER_PORT', 3000);
// For Docker users
define('VITE_SERVER_HOST', 'node'); // Your Docker container name
define('VITE_HMR_HOST', 'localhost'); // Public-facing host
// Enable cache busting in production
define('VITE_CACHE_BUSTING_ENABLED', true);
use WpSpaghetti\WpVite\Vite;
// Initialize
Vite::init(
plugin_dir_path(__FILE__),
plugin_dir_url(__FILE__),
'1.0.0'
);
// Your assets will work automatically!
add_action('wp_enqueue_scripts', function() {
Vite::enqueueScript('my-app', 'js/app');
Vite::enqueueStyle('my-styles', 'css/main');
});
// In functions.php
use WpSpaghetti\WpVite\Vite;
// Initialize
Vite::init(
get_template_directory() . '/',
get_template_directory_uri() . '/',
wp_get_theme()->get('Version')
);
// Enqueue theme assets
add_action('wp_enqueue_scripts', function() {
Vite::enqueueScript('theme-main', 'js/main');
Vite::enqueueStyle('theme-style', 'css/style');
});
// Add HMR support in development
add_action('wp_head', function() {
if (WP_DEBUG) {
Vite::devScripts();
}
});
// Get detailed debug information
$debugInfo = Vite::getDebugInfo();
// Information anifest loading status
// - Docker detection
// - Asset paths and URLs
Loading please wait ...
Before you can download the PHP files, the dependencies should be resolved. This can take some minutes. Please be patient.