vite-plugin-mix

0.4.0 verified Mon Apr 27 auth: no javascript

vite-plugin-mix (v0.4.0) adds a backend API server to your Vite dev server by running a separate process (e.g., PHP, Python, Node) alongside Vite's proxy. Unlike other solutions that require full-stack frameworks or custom middleware, it provides a simple plugin-based approach for mixing Vite with any backend language. It is actively maintained with monthly releases and ships TypeScript definitions. Peer dependency on Vite ^3.0.0.

Common errors

error Error: Cannot find module 'vite-plugin-mix' ↓

cause Package is not installed or wrong import path.

fix

Run npm install vite-plugin-mix@latest and use correct import.

error Error: The plugin requires vite@^3.0.0 to be installed ↓

cause Vite version mismatch (e.g., using Vite 4).

fix

Install Vite 3.x: npm install vite@^3.0.0

error TypeError: mix is not a function ↓

cause Wrong import style (named instead of default).

fix

Use import mix from 'vite-plugin-mix' (default import).

Warnings

breaking vite-plugin-mix requires Vite 3.x; will not work with Vite 2.x or Vite 4+. ↓

fix Upgrade to Vite 3 or use older plugin version compatible with your Vite version.

gotcha The handler script (PHP/Python/Node) must be executable and accessible; the plugin does not automatically set up the environment. ↓

fix Ensure your backend script is properly configured and has necessary dependencies installed.

deprecated Older versions used a different configuration API (e.g., 'backend' option). ↓

fix Update to v0.3.0+ and use the 'handler' and 'port' options.

Install

npm install vite-plugin-mix

yarn add vite-plugin-mix

pnpm add vite-plugin-mix

Imports

mix

wrong

const mix = require('vite-plugin-mix')

correct

import mix from 'vite-plugin-mix'

ESM-only; TypeScript types included.

default

wrong

import { mix } from 'vite-plugin-mix'

correct

import mix from 'vite-plugin-mix'

Package uses default export, not named export.

type definitions
```
import type { MixConfig } from 'vite-plugin-mix'
```
For TypeScript projects, you can import types for configuration.

Quickstart

Configure Vite to run a PHP backend on port 3001 via vite-plugin-mix.

import { defineConfig } from 'vite';
import mix from 'vite-plugin-mix';

export default defineConfig({
  plugins: [
    mix({
      handler: './api/handler.php',
      port: 3001,
    }),
  ],
});