We use Vue.js with Vuex to manage plan limits, features, and user logic in a friendly way. We need to keep track of global variables that change dynamically as the user interacts with the app, but we don't want to clutter our frontend components with this logic. Instead, we expose a dedicated object that encapsulates the current state of all plan and user logic. This object is populated on initial page load using actions and mutations. We transform almost all properties into isSomething or hasSomething forms to make code nicer in components that use it later. We also have a currentAccount object because a user can be a member of multiple accounts and switch between them during a session. The representation is tailored for the frontend, not the backend. We use computed properties to tap into the expiryStatus object and set showUpgradeTeaser and showExpiredTeaser booleans. These booleans determine whether to show upgrade messages or not. We also deal with volume limits by tapping into the isFeatureLimited object and its dynamically generated properties. This pattern can be applied to any SPA framework.