Toffe
How to Use SSE for Real-Time Updates Across Multiple Stores in Nuxt 3 with Pinia
Hey everyone!
I'm working on a Nuxt 3 project using Vue, Vuetify, and Pinia, and I’m implementing real-time updates with Server-Sent Events (SSE) as described in the Nitro WebSocket guide. I’ve successfully set up an SSE endpoint at /sse, and I can receive messages without any issues.
However, I’m stuck on two points:
How can I send SSE messages from other API routes (like /api/updateNote.ts) to notify changes globally?
How can I subscribe to these SSE updates in a way that works across my entire app, rather than manually subscribing in each store or component?
For example, I want my Pinia store for "notes" to automatically update when an SSE message arrives, regardless of the current page. Any advice or best practices would be greatly appreciated!
Thanks in advance!
18 replies