Accessing vuejs Global Reactive State

Access the global classes defined in Bricks Builder by leveraging Vue’s global properties

const bricksState = document.querySelector("[data-v-app]").__vue_app__.config.globalProperties.$_state;

console.log(bricksState.globalClasses);
// for example this gets the global class list and outputs on console

this context, $_state is a custom property attached to Vue’s globalProperties, allowing access to Bricks Builder’s internal state, including the globalClasses object. This object contains the list of global CSS classes defined within the Bricks Builder environment.

While this method provides a direct way to access global classes, it’s generally recommended to use Bricks Builder’s built-in Global Class Manager for creating, editing, and managing global CSS classes.