PHPackages                             juster/wordpress-vite - 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. juster/wordpress-vite

ActiveLibrary[Utility & Helpers](/categories/utility)

juster/wordpress-vite
=====================

A library to properly integrate a Vite workflow into WordPress.

v1.0.4(9mo ago)022MITPHPPHP >=7.4CI passing

Since Aug 19Pushed 9mo agoCompare

[ Source](https://github.com/jramard-addviso/wordpress-vite)[ Packagist](https://packagist.org/packages/juster/wordpress-vite)[ RSS](/packages/juster-wordpress-vite/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (5)Dependencies (6)Versions (6)Used By (0)

Wordpress Vite
==============

[](#wordpress-vite)

A library to properly integrate a Vite workflow into WordPress.

Requirements
------------

[](#requirements)

- PHP 7.4 or higher;
- WordPress 6.5 or higher;
- A valid Vite configuration using the npm module [vite-plugin-wordpress](https://github.com/jramard-addviso/vite-plugin-wordpress).

How it works
------------

[](#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](https://www.php.net/manual/en/language.oop5.autoload.php) for this. [Composer](https://getcomposer.org/doc/01-basic-usage.md#autoloading) 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:

```