{"id":22722,"library":"vite-plugin-live-reload","title":"Vite Plugin Live Reload","description":"vite-plugin-live-reload is a simple Vite plugin that triggers a full page reload when watched files change. Current stable version is 3.1.0, with a release cadence of occasional minor/patch updates. It uses chokidar under the hood and supports glob patterns, multiple paths, a custom root, and an alwaysReload option. Unlike Vite's built-in HMR, this plugin targets backend-driven projects (e.g., Kirby CMS, PHP, Rails) where file changes on the server side need to trigger a browser reload. It has zero runtime dependencies beyond Vite (peer dep vite ^4 || ^5 || ^6 || ^7 || ^8) and ships TypeScript definitions.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/arnoson/vite-plugin-live-reload","tags":["javascript","vite","live","reload","typescript"],"install":[{"cmd":"npm install vite-plugin-live-reload","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-live-reload","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-live-reload","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for the plugin to work","package":"vite","optional":false}],"imports":[{"note":"Default export was added in v3.0.1; pre-v3 it was a named export. The named export still exists as an alias.","wrong":"import { liveReload } from 'vite-plugin-live-reload'","symbol":"liveReload","correct":"import liveReload from 'vite-plugin-live-reload'"},{"note":"Named export for those who prefer named imports. Equivalent to default.","wrong":"import viteLiveReload from 'vite-plugin-live-reload'","symbol":"viteLiveReload","correct":"import { viteLiveReload } from 'vite-plugin-live-reload'"},{"note":"Config type interface for options. Available since v3.x with TypeScript support.","wrong":"","symbol":"Config","correct":"import type { Config } from 'vite-plugin-live-reload'"}],"quickstart":{"code":"// vite.config.js\nimport liveReload from 'vite-plugin-live-reload'\n\nexport default {\n  root: './',\n  plugins: [\n    liveReload(['../server/**/*.php', '../views/**/*.twig'], { alwaysReload: true }),\n  ],\n}","lang":"javascript","description":"Configures Vite to reload the browser when PHP or Twig files change using glob patterns and alwaysReload option."},"warnings":[{"fix":"Upgrade to Vite >=3 or stick with v2.x line (v2.1.0).","message":"v3.0.0 changed peer dependency to Vite 3+; incompatible with Vite 2.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Use the 'root' option to set a custom root directory: liveReload('path', { root: process.cwd() }).","message":"Paths are relative to Vite's root by default, not process.cwd().","severity":"gotcha","affected_versions":"*"},{"fix":"Use only for backend file watchers; do not expect HMR-like behavior.","message":"The plugin does not work with Vite's built-in HMR; it triggers a full page reload, not hot module replacement.","severity":"gotcha","affected_versions":"*"},{"fix":"Use with caution; only enable when needed for specific workflows.","message":"alwaysReload option causes reload even if browser is not on the modified HTML page; may cause unwanted reloads.","severity":"gotcha","affected_versions":"*"},{"fix":"Use default import: import liveReload from 'vite-plugin-live-reload' (or named export still works).","message":"v2.x required importing as { liveReload } named export; default export added in v3.0.1.","severity":"deprecated","affected_versions":">=2.0.0 <3.0.1"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Pass at least one glob pattern string or array: liveReload('**/*.php').","cause":"liveReload() called without any path argument or with undefined.","error":"Uncaught Error: [vite] The \"path\" argument must be of type string. Received undefined"},{"fix":"Run npm install vite --save-dev.","cause":"Vite is not installed or peer dependency not met.","error":"Error: Cannot find module 'vite'"},{"fix":"Use import liveReload from 'vite-plugin-live-reload' (default) or import { viteLiveReload } from 'vite-plugin-live-reload' (named).","cause":"Importing incorrectly, e.g., named import when using default import or vice versa.","error":"TypeError: liveReload is not a function"},{"fix":"No action needed; it's normal behavior.","cause":"The plugin is loaded but the server hasn't started; typically harmless informational message.","error":"[vite] server is not ready yet - liveReload will start on first request"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}