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

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

kucrut/vite-for-wp
==================

Vite integration for WordPress plugins and themes development.

v0.12.0(10mo ago)321127.6k—1.6%34[13 issues](https://github.com/kucrut/vite-for-wp/issues)[5 PRs](https://github.com/kucrut/vite-for-wp/pulls)5GPL-2.0-onlyPHPCI passing

Since Aug 21Pushed 10mo ago8 watchersCompare

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

READMEChangelog (10)Dependencies (1)Versions (30)Used By (5)

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 @kucrut/vite-for-wp
```

Create `vite.config.js`:

```
import { v4wp } from '@kucrut/vite-for-wp';

export default {
	plugins: [
		v4wp( {
			input: 'js/src/main.ts', // Optional, defaults to 'src/main.js'.
			outDir: 'js/dist', // Optional, defaults to 'dist'.
		} ),
	],
};
```

For multiple entrypoints, pass an object as the first parameter:

```
// vite.config.js
import { v4wp } from '@kucrut/vite-for-wp';

export default {
	plugins: [
		v4wp( {
			input: {
				main: 'js/src/main.ts',
				extra: 'js/src/extra.ts',
			},
			outDir: 'js/dist',
		} ),
	],
};
```

Refer to Rollup documentation on how to set entrypoints:

Feel free to [customise the configuration](https://vitejs.dev/config/) to add plugins, use https, etc:

```
// vite.config.js
import { readFileSync } from 'node:fs';
import { v4wp } from '@kucrut/vite-for-wp';
import react from '@vitejs/plugin-react';

export default {
	plugins: [ v4wp( { input: 'js/src/main.ts', outDir: 'js/dist' } ), 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 kucrut/vite-for-wp
```

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

Enqueue the script:

```