PHPackages                             southcoastweb/vite-for-wp - 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. southcoastweb/vite-for-wp

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

southcoastweb/vite-for-wp
=========================

Vite integration for WordPress plugins and themes development.

0.6.1(3y ago)021GPL-2.0-onlyPHP

Since Apr 6Pushed 3y agoCompare

[ Source](https://github.com/southcoastweb/vite-for-wp)[ Packagist](https://packagist.org/packages/southcoastweb/vite-for-wp)[ RSS](/packages/southcoastweb-vite-for-wp/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (3)Dependencies (2)Versions (4)Used By (0)

Vite for WordPress
==================

[](#vite-for-wordpress)

[Vite](https://vitejs.dev) integration for WordPress plugins and themes development.

Usage
-----

[](#usage)

Let's assume we have this plugin files structure:

```
my-plugin/
├ js/
| └ src/
|   └ main.ts
├ package.json
├ plugin.php
└ vite.config.js

```

### JavaScript

[](#javascript)

Add JS dependencies:

```
npm add -D vite @southcoastweb/vite-for-wp
```

Create `vite.config.js`:

```
import create_config from '@southcoastweb/vite-for-wp';

export default create_config( 'js/src/main.ts', 'js/dist' );
```

If you have multiple entrypoints to build, pass an object as the first parameter:

```
// vite.config.js
import create_config from '@southcoastweb/vite-for-wp';

export default create_config(
	{
		main: 'js/src/main.ts',
		extra: 'js/src/extra.ts',
	},
	'js/dist',
);
```

Pass a [configuration object](https://vitejs.dev/config/) as the third parameter if you need to add plugins, use https, etc:

```
// vite.config.js
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';
import create_config from '@southcoastweb/vite-for-wp';
import react from '@vitejs/plugin-react';

export default create_config( 'js/src/main.ts', 'js/dist', {
	plugins: [ react() ],
	server: {
		host: 'mydomain.com',
		https: {
			cert: readFileSync( 'path/to/cert.pem' ),
			key: readFileSync( 'path/to/key.pem' ),
		},
	},
} );
```

Lastly, add `dev` and `build` scripts to your `package.json`:

```
{
	"scripts": {
		"build": "vite build",
		"dev": "vite"
	}
}
```

### PHP

[](#php)

Add the composer dependency:

```
composer require southcoastweb/vite-for-wp
```

If your plugin/theme doesn't use composer, feel free to copy [the main file](https://github.com/south-coast-web/vite-for-wp/blob/main/vite-for-wp.php) and require it.

Enqueue the script:

```