# vite-plugin-full-reload

> Reload the page when files are modified

Latest version **1.2.0** (published 2024-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-full-reload
pnpm add vite-plugin-full-reload
yarn add vite-plugin-full-reload
bun add vite-plugin-full-reload
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-07-08 |
| First published | 2021-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 175 |
| Author | Máximo Mussini |
| Maintainers | elmassimo |
| Keywords | vite, plugin, vite-plugin, vitejs, full, reload |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-full-reload
- Repository: https://github.com/ElMassimo/vite-plugin-full-reload
- Issues: https://github.com/ElMassimo/vite-plugin-full-reload/issues
- npm.io page: https://npm.io/package/vite-plugin-full-reload

## Dependencies (2)

- [picomatch](https://npm.io/package/picomatch.md) ^2.3.1
- [picocolors](https://npm.io/package/picocolors.md) ^1.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2024-07-08
- 1.1.0 — 2023-11-16
- 1.0.5 — 2022-12-09
- 1.0.4 — 2022-08-09
- 1.0.3 — 2022-07-21
- 1.0.2 — 2022-07-21
- 1.0.1 — 2022-07-04
- 1.0.0 — 2022-01-05
- 0.2.2 — 2021-05-05
- 0.2.1 — 2021-03-20
- 0.2.0 — 2021-03-20
- 0.1.3 — 2021-03-18
- 0.1.2 — 2021-03-18
- 0.1.1 — 2021-03-17
- 0.1.0 — 2021-03-16

## README

<h2 align='center'><samp>vite-plugin-full-reload</samp></h2>

<p align='center'>Automatically reload the page when files are modified</p>

<p align='center'>
  <a href='https://www.npmjs.com/package/vite-plugin-full-reload'>
    <img src='https://img.shields.io/npm/v/vite-plugin-full-reload?color=222&style=flat-square'>
  </a>
  <a href='https://github.com/ElMassimo/vite-plugin-full-reload/blob/main/LICENSE.txt'>
    <img src='https://img.shields.io/badge/license-MIT-blue.svg'>
  </a>
</p>

<br>

[vite-plugin-full-reload]: https://github.com/ElMassimo/vite-plugin-full-reload
[vite-plugin-live-reload]: https://github.com/arnoson/vite-plugin-live-reload
[Vite Ruby]: https://github.com/ElMassimo/vite_ruby
[JS From Routes]: https://github.com/ElMassimo/js_from_routes
[picomatch]: https://github.com/micromatch/picomatch#globbing-features

## 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:

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

## Usage 🚀

Add it to your plugins in `vite.config.ts`

```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:

- <kbd>root</kbd>
  
  Files will be resolved against this directory.

  __Default:__ `process.cwd()`

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

- <kbd>delay</kbd>

  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`
  
  ```js
  FullReload('app/views/**/*', { delay: 100 })
  ``` 

- <kbd>always</kbd>

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

  __Default:__ `true`
  
  ```js
  FullReload('app/views/**/*', { always: false })
  ``` 

## Acknowledgements

- <kbd>[vite-plugin-live-reload]</kbd>

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

  I've made [two](https://github.com/arnoson/vite-plugin-live-reload/pull/3) [PRs](https://github.com/arnoson/vite-plugin-live-reload/pull/5) 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](https://opensource.org/licenses/MIT).

---
_Source: https://npm.io/package/vite-plugin-full-reload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._