Get started

Installation

First, install vite-plugin-php using npm:

npm install vite-plugin-php@latest --save-dev

Adjust Vite

To configure Vite to use vite-plugin-php, update your vite.config.js file as follows:

import { defineConfig } from 'vite';
import usePHP from 'vite-plugin-php';

export default defineConfig({
  plugins: [usePHP()],
});

?? By default, the plugin attempts to access the system's php binary and uses index.php as the main entry point.\ You can alos customize the PHP binary path or specify multiple entry points:

usePHP({
  binary: '/path/to/php', // Specify your PHP binary path
  entry: ['index.php', 'about.php', 'contact.php'], // Multiple entry points
});

Use PHP

Instead of the index.html create an index.php file in your project root:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite PHP Integration</title>
  </head>
  <body>
    <?php echo "Hello, Vite and PHP!"; ?>

    <?php if (isset($_GET['show_me'])): ?>
      Hello world!
    <?php endif; ?>
  </body>
</html>

With this setup, vite-plugin-php processes your index.php file, including all imported and preprocessed assets supported by Vite and other loaders.