Vite for WordPress

https://github.com/kucrut/vite-for-wp
Admin
Vite for WordPress is a Vite integration for WordPress plugins and themes development, enabling...
Tokens:3,129
Snippets:21
Trust Score:9.1
License:GPL-2.0
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install PHP dependency via Composer

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Installs the Vite for WordPress PHP package via Composer. If Composer is not used, the main file can be copied and required manually.

```sh
composer require kucrut/vite-for-wp
```

--------------------------------

### Install JS dependencies

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Installs Vite and the Vite for WordPress package as dev dependencies for JavaScript development.

```sh
npm add -D vite @kucrut/vite-for-wp
```

--------------------------------

### Install externalization dependencies

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Installs required dependencies for externalizing WordPress-registered scripts from the final build.

```sh
npm add -D rollup-plugin-external-globals vite-plugin-external
```

--------------------------------

### Customize vite.config.js with React and HTTPS

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Customizes the Vite configuration by adding the React plugin and HTTPS server settings. The example reads certificate and key files from the filesystem.

```js
// 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' ),
		},
	},
};
```

--------------------------------

### Externalize WordPress scripts with wp_scripts()

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Externalizes WordPress-registered scripts like react and react-dom by adding wp_scripts() to the Vite plugins. React and react-dom must still be installed as dev dependencies and added to the dependencies array when enqueueing.

```js
// vite.config.js
import { v4wp } from '@kucrut/vite-for-wp';
import { wp_scripts } from '@kucrut/vite-for-wp/plugins';
import react from '@vitejs/plugin-react';

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

--------------------------------

### Configure multiple entrypoints in vite.config.js

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Shows how to configure multiple entrypoints by passing an object as the first parameter to v4wp. Refer to Rollup documentation for setting entrypoints.

```js
// 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',
		} ),
	],
};
```

--------------------------------

### Create vite.config.js with v4wp

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Creates a vite.config.js file with the v4wp plugin. The input and outDir options are optional with defaults 'src/main.js' and 'dist' respectively.

```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'.
		} ),
	],
};
```

--------------------------------

### Plugin file structure

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Shows the assumed file structure for a WordPress plugin using Vite for WordPress. The structure includes a JavaScript source directory, package.json, plugin.php, and vite.config.js.

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

--------------------------------

### Add dev and build scripts to package.json

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Adds dev and build scripts to package.json for running Vite in development and building production assets.

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

--------------------------------

### Enqueue Vite asset in WordPress

Source: https://github.com/kucrut/vite-for-wp/blob/main/README.md

Enqueues a Vite asset in WordPress using Vite\enqueue_asset(). Each entrypoint must be enqueued separately. The function accepts optional dependencies, CSS dependencies, CSS media, CSS-only, and in-footer options.

```php
<?php

use Kucrut\Vite;

add_action( 'wp_enqueue_scripts', function (): void {
	Vite\enqueue_asset(
		__DIR__ . '/js/dist',
		'js/src/main.ts',
		[
			'handle' => 'my-script-handle',
			'dependencies' => [ 'wp-components', 'some-registered-script-handle' ], // Optional script dependencies. Defaults to empty array.
			'css-dependencies' => [ 'wp-components', 'some-registered-style-handle' ], // Optional style dependencies. Defaults to empty array.
			'css-media' => 'all', // Optional.
			'css-only' => false, // Optional. Set to true to only load style assets in production mode.
			'in-footer' => true, // Optional. Defaults to false.
		]
	);
} );
```
Tokens:
Raw