Search⌘ K
AI Features

Composables with Shared State

Explore how to efficiently share global state in Vue applications by moving reactive references outside composables. Understand managing scroll position and window size reactively while ensuring compatibility with server-side rendering environments.

We'll cover the following...

When useScrollPosition and useWindowSize are initialized, they create and return a new ref. This usually isn’t a problem, but there’s no need to have multiple refs that store the same information. These functionalities could be considered global to an application and can be stored just once. This can be accomplished by taking the ref state and the update method and moving them outside of the ...