Vue 3 in a SPA that grows
From EventBus to Pinia, heavy integrations, and the patterns against duplication
A SPA's problems arrive when it stops being small: state changes hands without anyone seeing where, a heavy library does not get along with the reactivity system, and the same piece of logic shows up in five components. The series takes on the three cases with concrete patterns.
A SPA's problems arrive when it stops being small
As long as the components are few, an EventBus works and nobody complains. The trouble comes later: state changes hands without anyone seeing where, and answering who changed this value means reading the whole project.
This series takes on three cases that show up in that order. Replacing the EventBus with a store without rewriting the application in one go. Integrating a heavy library, in this case a map, keeping it out of the reactivity system instead of letting the framework manage it. And extracting duplication once the same piece of logic has ended up in five components.
The last article brings an anti-pattern too, because the wrong abstraction costs more than the duplication it meant to remove.
What you will learn
- ✓ Replace an EventBus with Pinia progressively, without rewriting everything
- ✓ Integrate a heavy library while keeping it out of the reactivity system
- ✓ Extract duplication with composables, wrappers and utilities, and know when not to
Articles in the series
- 01From EventBus to Pinia: Incremental State Migration in Vue 3 11 min
Practical patterns for replacing EventBus with Pinia in a Vue 3 project: cache with deduplication, selective persistence, and a hybrid migration approach
→ - 02OpenLayers and Vue 3: Integration with Composables and TypeScript 13 min
Practical patterns for integrating OpenLayers into Vue 3 using shallowRef, typed composables, and lifecycle management. Runnable demo included.
→ - 033 Patterns (+1 Anti-Pattern) for Eliminating Duplication in Vue 3 10 min
Three Vue 3 patterns for eliminating duplication in enterprise SPAs, plus an anti-pattern on knowing when to stop. Runnable demo included.
→