README

A library to properly integrate a Vite workflow into WordPress.

Requirements

• PHP 7.4 or higher;
• WordPress 6.5 or higher;
• A valid Vite configuration using the npm module vite-plugin-wordpress.

How it works

All the logic for resolving paths to assets generated by Vite is located in the core of the library.

All you have to do is instantiate the module by passing two parameters:

1. the path to the vite.config.php configuration file generated by the previously installed vite-plugin-wordpress npm module;
2. the current Wordpress environment type (production or whatever else).

use Juster\WordpressVite\App;

function vite(): App
{
    return App::get(ABSPATH, WP_ENVIRONMENT_TYPE);
}

vite();

You may need an autoloader for this. Composer can help you with that.

Then, you can include your CSS & JavaScript files in this way:

function theme(): void
{
    vite()->assets()->enqueueStyle('theme', 'src/styles/main.css');
    vite()->assets()->enqueueScript('theme', 'src/scripts/main.js');
}

add_action('wp_enqueue_scripts', 'theme');

For other static files that need to be included in templates, such as images, you can proceed as follows:

<img
  src="<?= vite()->assets()->resolve('src/assets/images/placeholder.webp') ?>"
  alt="A wonderful image"
/>

And if you prefer to avoid this verbosity, you can declare a small utility function, such as this one, for example:

function asset($path): string
{
    return vite()->assets()->resolve("src/assets/$path");
}

This results in the following in the templates:

<img src="<?= asset('images/placeholder.webp') ?>" alt="A wonderful image" />