Suggest an editImprove this articleRefine the answer for “Why does Pinia replace Vuex in the Vue 3 ecosystem?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Pinia** replaces **Vuex** in Vue 3 because it drops mutations (less boilerplate), naturally builds on the Composition API, provides automatic TypeScript support, is easier to set up for SSR, and became the standard store in Nuxt 3. **Key point:** Pinia is significantly simpler than Vuex, especially in large projects, which is why it became the default state manager in the Vue 3 ecosystem.Shown above the full answer for quick recall.Answer (EN)Image## Key reasons why Pinia replaces Vuex --- ### 1. **Vuex is conceptually outdated (mutations are no longer needed)** Vuex → state changes happen through **mutations**, which: - create a lot of boilerplate - work poorly with TypeScript - hurt readability - force you to write the same thing multiple times Pinia → **there are no mutations**. There is only: - `state` - `getters` - `actions` (state can be changed directly inside them) ```js this.count++ // valid in Pinia ``` → Simpler code → Fewer layers → Fewer files → Faster to understand --- ### 2. **The Composition API as Pinia's foundation** Vue 3 is fully oriented around `setup()` and `ref`/`reactive`. Vuex was built for Vue 2, before the Composition API existed. Pinia: - uses the Composition API under the hood - feels like a native part of Vue 3 - integrates easily with composable functions - lowers the entry barrier Vuex fit poorly into the new paradigm. --- ### 3. **Excellent TypeScript support** Vuex with TypeScript → pain: you have to manually write types for: - state - mutations - actions - context In Pinia, types: - are inferred automatically - work out of the box - require no custom hacks This made Pinia the preferred choice for modern projects. --- ### 4. **Less boilerplate, cleaner architecture** Vuex example: ```js mutations: { increment(state) { state.count++ } }, actions: { increment({ commit }) { commit('increment') } } ``` Pinia: ```js actions: { increment() { this.count++ } } ``` The difference is obvious. Pinia is significantly simpler, especially in large projects. --- ### 5. **Compatibility and SSR readiness (Nuxt 3)** Nuxt 3 chose **Pinia as its standard store**, not Vuex. This automatically cemented it as the default state manager in the Vue 3 ecosystem. SSR with Pinia: - is easier to set up - has no singleton issues - creates the store correctly for each request Vuex → SSR is harder. --- ### 6. **HMR: automatic store updates** Pinia supports HMR: - the store updates without reloading the page - state is preserved Vuex could not do this, or required manual patches. --- ### 7. **Pinia's plugin system is simpler** Plugins in Pinia are: - declarative - compact - easy to integrate Great for: - localStorage persistence - logging - analytics Vuex → more complex, more boilerplate.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.