{"id":22740,"library":"vite-plugin-mix","title":"vite-plugin-mix","description":"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.","status":"active","version":"0.4.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-mix","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-mix","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-mix","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: works with Vite 3.x","package":"vite","optional":false}],"imports":[{"note":"ESM-only; TypeScript types included.","wrong":"const mix = require('vite-plugin-mix')","symbol":"mix","correct":"import mix from 'vite-plugin-mix'"},{"note":"Package uses default export, not named export.","wrong":"import { mix } from 'vite-plugin-mix'","symbol":"default","correct":"import mix from 'vite-plugin-mix'"},{"note":"For TypeScript projects, you can import types for configuration.","wrong":"","symbol":"type definitions","correct":"import type { MixConfig } from 'vite-plugin-mix'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport mix from 'vite-plugin-mix';\n\nexport default defineConfig({\n  plugins: [\n    mix({\n      handler: './api/handler.php',\n      port: 3001,\n    }),\n  ],\n});","lang":"typescript","description":"Configure Vite to run a PHP backend on port 3001 via vite-plugin-mix."},"warnings":[{"fix":"Upgrade to Vite 3 or use older plugin version compatible with your Vite version.","message":"vite-plugin-mix requires Vite 3.x; will not work with Vite 2.x or Vite 4+.","severity":"breaking","affected_versions":">=0.3.0 <0.4.0"},{"fix":"Ensure your backend script is properly configured and has necessary dependencies installed.","message":"The handler script (PHP/Python/Node) must be executable and accessible; the plugin does not automatically set up the environment.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Update to v0.3.0+ and use the 'handler' and 'port' options.","message":"Older versions used a different configuration API (e.g., 'backend' option).","severity":"deprecated","affected_versions":"<0.3.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install vite-plugin-mix@latest and use correct import.","cause":"Package is not installed or wrong import path.","error":"Error: Cannot find module 'vite-plugin-mix'"},{"fix":"Install Vite 3.x: npm install vite@^3.0.0","cause":"Vite version mismatch (e.g., using Vite 4).","error":"Error: The plugin requires vite@^3.0.0 to be installed"},{"fix":"Use import mix from 'vite-plugin-mix' (default import).","cause":"Wrong import style (named instead of default).","error":"TypeError: mix is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}