usePartyRef() is a Vue 3 composable that extends the functionality of the standard ref() to enable real-time, synchronized state across multiple clien

Search code, repositories, users, issues, pull requests...

submited by
Style Pass
2024-07-02 02:30:05

usePartyRef() is a Vue 3 composable that extends the functionality of the standard ref() to enable real-time, synchronized state across multiple clients globally.

It transforms local reactive state into a shared state across all connected clients, allowing you to build multiplayer interactive experiences using the Vue lifecycle hooks you're familiar with. The composable returns a Ref, so you can watch it, bind it to inputs, run a computed on it, etc.

Under the hood, it's using PartyKit stateful servers and websockets, based on CloudFlare Durable Objects, to keep values in sync and persist them beyond the life of the browser window. The library is written in TypeScript and is fully type-safe.

Below is a comparison of using Vue's native ref() versus usePartyRef() to illustrate how you can seamlessly use globally shared state as easily as using a normal ref:

With usePartyRef(), the count state is synchronized in real time across all clients that subscribe to it. That might be two browser tabs on your local machine, or thousands of users all over the world.

Leave a Comment