Managing Shared State in Vue Without Vuex

Not every Vue project needs a full state management library. For a lot of small to medium apps I build, pulling in Vuex or Pinia adds boilerplate that isn't worth it — a simple composable does the same job with far less setup.

The idea is straightforward: create a single reactive object (using Vue's `reactive()` or `ref()`) inside a plain JavaScript file, and export functions that read or mutate it. Because Vue's reactivity system works outside of components too, any component that imports this composable automatically stays in sync with the shared state — no extra store, no mutations boilerplate, no strict action/mutation separation.

This pattern shines especially in projects like a shopping cart, a logged-in user profile, or a set of global UI flags (like a mobile menu toggle) — cases where you need shared state across a few components, but not the full complexity of a dedicated state management library.

Once a project actually grows past that point — many modules, complex async flows, time-travel debugging needs — that's usually the signal it's time to introduce Pinia. But starting simple has saved me a lot of unnecessary structure on smaller projects.