vite-plugin-full-reload

What is vite-plugin-full-reload?

vite-plugin-full-reload is a Vite plugin that enables full page reloads when certain files change. This is particularly useful for scenarios where hot module replacement (HMR) is not sufficient or applicable, such as when working with non-JavaScript files or complex build setups.

What are vite-plugin-full-reload's main functionalities?

Full Page Reload on File Change

This feature allows you to specify a list of file patterns. When any of these files change, the entire page will reload. This is useful for ensuring that changes to configuration files or other non-JavaScript assets are properly reflected in the browser.

json
{
  "plugins": [
    require('vite-plugin-full-reload')(['config/**/*', 'src/**/*'])
  ]
}

Other packages similar to vite-plugin-full-reload

vite-plugin-live-reload

vite-plugin-live-reload is another Vite plugin that provides live reloading capabilities. It is similar to vite-plugin-full-reload but focuses more on live reloading specific files rather than triggering a full page reload. This can be more efficient in scenarios where only certain parts of the application need to be updated.

vite-plugin-restart

vite-plugin-restart is a Vite plugin that restarts the Vite server when certain files change. This is useful for scenarios where changes to configuration files or other critical files require a full server restart. Unlike vite-plugin-full-reload, which focuses on reloading the browser, vite-plugin-restart focuses on restarting the development server.

README

vite-plugin-full-reload

Automatically reload the page when files are modified

Why? 🤔

When using Vite Ruby, I wanted to see changes to server-rendered layouts and templates without having to manually reload the page.

Also, in JS From Routes path helpers are generated when Rails reload is triggered.

Triggering a page reload when config/routes.rb is modified makes the DX very smooth.

Installation 💿

Install the package as a development dependency:

npm i -D vite-plugin-full-reload # yarn add -D vite-plugin-full-reload

Usage 🚀

Add it to your plugins in vite.config.ts

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

export default defineConfig({
  plugins: [
    FullReload(['config/routes.rb', 'app/views/**/*'])
  ],
})

This is useful to trigger a page refresh for files that are not being imported, such as server-rendered templates.

To see which file globbing options are available, check picomatch.

Configuration ⚙️

The following options can be provided:

• root

  Files will be resolved against this directory.

  Default: process.cwd()

  FullReload('config/routes.rb', { root: __dirname }),
  

• delay

  How many milliseconds to wait before reloading the page after a file change. It can be used to offset slow template compilation in Rails.

  Default: 0

  FullReload('app/views/**/*', { delay: 100 })
  

• always

  Whether to refresh the page even if the modified HTML file is not currently being displayed.

  Default: true

  FullReload('app/views/**/*', { always: false })
  

Acknowledgements

• vite-plugin-live-reload

  This is a nice plugin, I found it right before publishing this one.

  I've made two PRs that were needed to support these use cases.

  At this point in time they are very similar, except this library doesn't create another chokidar watcher.

License

This library is available as open source under the terms of the MIT License.