# @prefresh/vite

> A vite plugin to enable fast-refresh for Preact components.

Latest version **4.0.1** (published 2026-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @prefresh/vite
pnpm add @prefresh/vite
yarn add @prefresh/vite
bun add @prefresh/vite
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2026-09-13 |
| First published | 2020-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 15.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 392 |
| Maintainers | jdecroock, marvinhagemeister, developit |

## Links

- npm: https://www.npmjs.com/package/@prefresh/vite
- Repository: https://github.com/preactjs/prefresh
- Homepage: https://github.com/preactjs/prefresh#readme
- Issues: https://github.com/preactjs/prefresh/issues
- npm.io page: https://npm.io/package/@prefresh/vite

## Dependencies (5)

- [rolldown](https://npm.io/package/rolldown.md) ^1.0.0-rc.12
- [@prefresh/core](https://npm.io/package/@prefresh/core.md) 1.5.11
- [@prefresh/utils](https://npm.io/package/@prefresh/utils.md) 1.2.1
- [@prefresh/rolldown](https://npm.io/package/@prefresh/rolldown.md) 0.1.0
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^4.2.1

## Recent versions

- 4.0.1 (latest) — 2026-09-13
- 4.0.0 — 2026-08-27
- 3.0.1 — 2026-05-12
- 3.0.0 — 2026-04-08
- 2.4.12 — 2026-02-18
- 2.4.11 — 2025-10-24
- 2.4.10 — 2025-08-20
- 2.4.9 — 2025-08-19
- 2.4.8 — 2025-06-28
- 2.4.7 — 2025-01-29
- 2.4.6 — 2024-06-26
- 2.4.5 — 2023-12-24
- 2.4.4 — 2023-11-10
- 2.4.3 — 2023-10-31
- 2.4.2 — 2023-10-31
- … 51 more at https://npm.io/package/@prefresh/vite/versions

## README

# Prefresh-vite

[![npm version](https://badgen.net/npm/v/@prefresh/vite)](https://www.npmjs.com/package/@prefresh/vite)

## Setup

```
npm i -s @prefresh/vite
## OR
yarn add @prefresh/vite
```

Then add it to your `vite.config.js` config:

```js
import prefresh from '@prefresh/vite';

export default {
  plugins: [prefresh()],
};
```

`@prefresh/vite` configures Vite's Oxc JSX transform for Preact and composes
`@prefresh/rolldown` internally. Babel is only used as a selective fallback when
you pass `parserPlugins`.

## Options

The plugin accepts two options `include` & `exclude` which are used in the [`@rollup/pluginutils.createFilter`](https://github.com/rollup/plugins/tree/master/packages/pluginutils#createfilter) to filter out files or include them.

The plugin also accepts the addition of [`parserPlugins`](https://babeljs.io/docs/en/babel-parser#plugins).
Providing `parserPlugins` opts that file transform back into the Babel-based path,
similar to how `@preact/preset-vite` only enables Babel when that path is requested.

## Best practices

### Recognition

We need to be able to recognise your components, this means that components should
start with a capital letter and hook should start with `use` followed by a capital letter.
This allows the refresh transform to effectively recognise these.

Do note that a component as seen below is not named.

```jsx
export default () => {
  return <p>Want to refresh</p>;
};
```

Instead do:

```jsx
const Refresh = () => {
  return <p>Want to refresh</p>;
};

export default Refresh;
```

When you are working with HOC's be sure to lift up the `displayName` so we can
recognise it as a component.

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