vite-plugin-full-reload

1.2.0 verified Mon Apr 27 auth: no javascript

A Vite plugin that triggers a full page reload when specified files (e.g., server-rendered templates, routes) are modified. Current stable version is 1.2.0. Released as needed, with ~1 year between minor versions. Unlike HMR-based solutions, this plugin forces a complete browser refresh, making it ideal for frameworks like Ruby on Rails where HMR is not available for server-rendered assets. It uses picomatch for glob patterns, supports configurable root directory, delay, and 'always' option. The plugin is lightweight and does not create an extra chokidar watcher, relying on Vite's built-in file watching.

Common errors

error Error: Cannot find module 'vite-plugin-full-reload' ↓

cause Package not installed or missing in node_modules.

fix

Run npm install vite-plugin-full-reload --save-dev

error TypeError: FullReload is not a function ↓

cause Wrong import style: using named import instead of default import.

fix

Use import FullReload from 'vite-plugin-full-reload' instead of import { FullReload } from ...

error TypeError: Cannot read properties of undefined (reading 'map') ↓

cause The first argument to FullReload must be an array of strings (glob patterns). Passing a string or undefined causes this error.

fix

Ensure you pass an array: FullReload(['config/routes.rb'])

Warnings

gotcha The plugin triggers a full page reload, not HMR. If you expect HMR-like partial updates, this will cause complete page refresh. ↓

fix Use HMR plugins for JS/TS changes; this plugin is intended for non-imported files (e.g., server-side templates).

gotcha The 'always' option defaults to true, meaning a reload is triggered even if the changed file is not currently displayed in the browser. Set always: false to limit reloads to active tabs. ↓

fix Explicitly set `always: false` if you want reload only when the file is visible in the browser.

deprecated No deprecations known. Plugin is actively maintained.

Install

npm install vite-plugin-full-reload

yarn add vite-plugin-full-reload

pnpm add vite-plugin-full-reload

Imports

default
wrong
```
const FullReload = require('vite-plugin-full-reload')
```
correct
```
import FullReload from 'vite-plugin-full-reload'
```
Default import; CommonJS require works but TypeScript type inference may be limited. ESM-only types are provided.
FullReload
wrong
```
import { FullReload } from 'vite-plugin-full-reload'
```
correct
```
import FullReload from 'vite-plugin-full-reload'
```
The package exports a default function, not a named export Named import like 'import { FullReload }' is incorrect.
VitePluginFullReload
wrong
```
import VitePluginFullReload from 'vite-plugin-full-reload'
```
correct
```
import FullReload from 'vite-plugin-full-reload'
```
The default export is named 'FullReload' in documentation; using any other import name is fine but the actual symbol is default.

Quickstart

Shows how to add vite-plugin-full-reload to a Vite config to trigger full page reload on changes to server-rendered templates.

import { defineConfig } from 'vite'
import FullReload from 'vite-plugin-full-reload'

export default defineConfig({
  plugins: [
    // Reload the page when routes.rb or any view template changes
    FullReload(['config/routes.rb', 'app/views/**/*'], {
      root: process.cwd(), // optional, default
      delay: 0,            // optional, default
      always: true         // optional, default
    })
  ]
})