# vite-plugin-vue-server-ref

> Share state between clients and Vite server

Latest version **1.0.0** (published 2025-02-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vue-server-ref
pnpm add vite-plugin-vue-server-ref
yarn add vite-plugin-vue-server-ref
bun add vite-plugin-vue-server-ref
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

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

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2025-02-18 |
| First published | 2021-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 16.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 75 |
| Author | Anthony Fu |
| Maintainers | antfu |
| Keywords | vite-plugin |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vue-server-ref
- Repository: https://github.com/antfu/vite-plugin-vue-server-ref
- Homepage: https://github.com/antfu/vite-plugin-vue-server-ref#readme
- Issues: https://github.com/antfu/vite-plugin-vue-server-ref/issues
- Funding: https://github.com/sponsors/antfu
- npm.io page: https://npm.io/package/vite-plugin-vue-server-ref

## Dependencies (4)

- [ufo](https://npm.io/package/ufo.md) ^1.5.4
- [mlly](https://npm.io/package/mlly.md) ^1.7.4
- [debug](https://npm.io/package/debug.md) ^4.4.0
- [klona](https://npm.io/package/klona.md) ^2.0.6

## 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.0.0 (latest) — 2025-02-18
- 0.4.2 — 2024-02-04
- 0.4.1 — 2024-02-02
- 0.4.0 — 2023-12-04
- 0.3.4 — 2023-07-08
- 0.3.3 — 2023-04-18
- 0.3.2 — 2023-04-18
- 0.3.1 — 2023-03-09
- 0.3.0 — 2022-07-29
- 0.2.4 — 2021-09-17
- 0.2.3 — 2021-09-08
- 0.2.2 — 2021-08-11
- 0.2.1 — 2021-08-11
- 0.2.0 — 2021-08-11
- 0.1.7 — 2021-08-10
- … 12 more at https://npm.io/package/vite-plugin-vue-server-ref/versions

## README

# vite-plugin-vue-server-ref

[![NPM version](https://img.shields.io/npm/v/vite-plugin-vue-server-ref?color=a1b858&label=)](https://www.npmjs.com/package/vite-plugin-vue-server-ref)

Share state between clients and Vite server.

## Install

```bash
npm i -D vite-plugin-vue-server-ref
```

Add plugin to your `vite.config.ts`:

```ts
// vite.config.ts
import ServerRef from 'vite-plugin-vue-server-ref'

export default {
  plugins: [
    ServerRef({
      state: {
        /* Your custom initial state */
        foo: 'bar',
        object: {
          count: 0
        }
      }
    })
  ]
}
```

Use import it in your modules (`server-ref:[key]`)

```ts
import foo from 'server-ref:foo'

console.log(foo.value) // bar

foo.value = 'foobar'

// same as other modules / clients imported the server ref with same key
// or even refresh the pages
console.log(foo.value) // foobar
```

Or working with reactive object (`server-reactive:[key]`)

```ts
import object from 'server-reactive:object'

console.log(object.count) // 0
```

## Type Support

As server import can't infer the type correctly (by default it's `ServerRef<any>`), you can using `as` to specify the type.

```ts
import type { ServerReactive, ServerRef } from 'vite-plugin-vue-server-ref/client'
import _foo from 'server-ref:foo'
import _object from 'server-ref:object'

const foo = _foo as ServerRef<string>
const object = _object as ServerReactive<{ count: number }>

foo.value // string
object.count // number
```

## Controls

```ts
import foo from 'server-ref:foo'

foo.$syncUp = false // make it download only

foo.value = 'foobar' // won't send to server or other clients
```

```ts
import foo from 'server-ref:foo'

foo.$syncDown = false // make it upload only

// changes from other clients won't be received
```

```ts
import foo from 'server-ref:foo'

// listen to server change
foo.$onSet((value) => {
  console.log(`Changes from server: ${value}`)
})
```

## Diffing

When working with reactive objects, you can add `?diff` to make the syncing incremental (deep diff).

```ts
import object from 'server-ref:object?diff'

console.log(object) // { foo: ..., bar: ... }

object.foo.nested = 'bar'
// the patch will be sent as '{ foo: { nested: 'bar' }}}'
// instead of the entire object
```

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
  </a>
</p>

## License

[MIT](./LICENSE) License © 2021 [Anthony Fu](https://github.com/antfu)

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