Pinia is the official state management library for Vue, and it has largely replaced Vuex as the default choice for new Vue 3 applications. Its core API is built around a single function: defineStore(). This function creates a store definition—a reusable, type-safe container for state, computed values, and methods that can be shared across components…
A Pinia store is more than a container for data. It has three distinct parts that work together: state (the data itself), getters (computed values derived from state), and actions (methods that change state or perform side effects). Understanding how these three interact—and how to access them from components without breaking reactivity—is the difference between…
A Pinia store is not just a passive container. It exposes three powerful methods that let you control its lifecycle and react to its activity: $reset(), $subscribe(), and $onAction(). These methods are what turn a store from a simple data holder into an observable, resettable, and instrumentable part of your application’s architecture. The most important…
Pinia’s plugin system is the escape hatch that turns a store library into an extensible framework. A plugin is a function that receives a context object—containing the Pinia instance, the Vue app, the store being augmented, and the options passed to defineStore()—and can return an object of properties to add to the store, or mutate…
Vue Router is the official routing library for Vue, and its central function—createRouter()—is where every client-side navigation begins. The function accepts a configuration object with a routes array and a history option, and returns a router instance that you install on the Vue app . The history option is the most consequential decision in that…
A URL like /users/42 and a URL like /users/42?tab=posts are both requests for the same resource, but they carry different kinds of information. The 42 is part of the path—it identifies which user. The tab=posts is a query string—it describes how to display that user. Vue Router treats these two as distinct concepts with distinct…
A Vue application’s UI is rarely a single flat layer. A dashboard has a persistent sidebar and a main content area. A settings page has a navigation panel and a detail pane. A user profile has a header that stays while the tab content changes. Vue Router expresses these structures through three distinct mechanisms: nested…
Navigation guards are the control points where a Vue application decides whether a route transition should proceed, be cancelled, or be redirected. They exist because navigation is not always safe: a user might be navigating to a page they are not authenticated for, or leaving a form with unsaved changes, or entering a route that…
A Vue Router configuration is not just a list of paths and components. It is a place to attach arbitrary data to each route—whether a page requires authentication, what transition animation it should use, or what title to set on the document. That data lives in the meta field, and it is accessible from the…
A Vue Router configuration has two persistent weaknesses as an application grows. The first is that route names and parameters are strings. A typo in router.push({ name: ‘user-profile’ }) when the route is actually named ‘userProfile’ compiles without error and fails at runtime. The second is that data fetching lives inside the component’s onMounted hook,…