{"id":17401,"library":"vuex-router-sync","title":"Vuex Router Sync","description":"The `vuex-router-sync` library provides a straightforward utility to keep `vue-router`'s current route state synchronized with a `vuex` store. Its core `sync` function injects the current route object into the Vuex state, typically at `store.state.route`, enabling reactive access to route parameters, query strings, and path information directly from the store. This simplifies component logic that depends on route data, reducing the need to pass `$route` explicitly. The current stable version, 5.0.0, is compatible with `vue-router >= 3.0.0` and `vuex >= 3.0.0` and includes comprehensive TypeScript definitions. A release candidate for v6.0.0 is under development, targeting compatibility with the Vue 3 ecosystem (Vuex 4, Vue Router 4). The package has a consistent release cadence, typically aligning with major version updates of Vue's core routing and state management libraries. It differentiates itself by offering a simple, drop-in solution for a common integration pattern.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vuex-router-sync","tags":["javascript","vuex","vue-router","vue","typescript"],"install":[{"cmd":"npm install vuex-router-sync","lang":"bash","label":"npm"},{"cmd":"yarn add vuex-router-sync","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuex-router-sync","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for synchronizing router state.","package":"vue-router","optional":false},{"reason":"Required peer dependency for integrating with a Vuex store.","package":"vuex","optional":false}],"imports":[{"note":"The primary function to synchronize Vue Router and Vuex. Ensure named import for ESM.","wrong":"const sync = require('vuex-router-sync').sync;","symbol":"sync","correct":"import { sync } from 'vuex-router-sync';"},{"note":"Import for TypeScript users to type the optional third argument of the `sync` function.","symbol":"SyncOptions","correct":"import type { SyncOptions } from 'vuex-router-sync';"},{"note":"TypeScript type for the `state.route` object injected by `vuex-router-sync`.","symbol":"VuexRouterSyncState","correct":"import type { VuexRouterSyncState } from 'vuex-router-sync';"}],"quickstart":{"code":"import Vue from 'vue';\nimport Vuex from 'vuex';\nimport VueRouter from 'vue-router';\nimport { sync } from 'vuex-router-sync';\n\nVue.use(Vuex);\nVue.use(VueRouter);\n\nconst routes = [\n { path: '/', component: { template: '
User ID from store: {{ $store.state.route.params.id }}
' } }\n];\n\nconst router = new VueRouter({\n routes\n});\n\nconst store = new Vuex.Store({\n state: {\n appData: 'Initial Application Data'\n },\n getters: {\n currentRoutePath: state => state.route.path // Access route info from store\n }\n});\n\n// Synchronize Vue Router with Vuex store\nsync(store, router);\n\nnew Vue({\n router,\n store,\n template: `\n
\n
Vuex Router Sync Example
\n
Current path (from Vuex store): {{ $store.state.route.path }}
\n
Current path (from Vue Router): {{ $route.path }}
\n \n \n \n
\n `\n}).$mount('#app');","lang":"typescript","description":"Demonstrates basic setup and usage of `vuex-router-sync` to expose the current router state via `store.state.route`."},"warnings":[{"fix":"For Vue 2 applications, ensure `vuex-router-sync` is locked to a `^5.0.0` version. Migrate to Vue 3 ecosystem before upgrading to `vuex-router-sync` v6.","message":"Version 6.0.0 (currently in release candidate) introduces breaking changes for compatibility with Vue 3, Vuex 4, and Vue Router 4. Applications on Vue 2 should remain on `vuex-router-sync` v5.","severity":"breaking","affected_versions":">=6.0.0-rc.1"},{"fix":"Ensure that `vuex` and `vue-router` are both at version `3.0.0` or higher when using `vuex-router-sync` v5. For older versions, you may need to rely on `any` types or downgrade `vuex-router-sync`.","message":"For TypeScript users, `vuex-router-sync` v5.0.0 updated its type declarations to be compatible exclusively with `vuex >= 3.0.0` and `vue-router >= 3.0.0`. Older versions are no longer supported by the types.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Review any custom logic that intercepts the `router/ROUTE_CHANGED` mutation and update it to expect an object with both `to` and `from` route properties. If you are not listening to this specific mutation, no action is required.","message":"In `vuex-router-sync` v4.0.0, the payload for the internal `router/ROUTE_CHANGED` mutation was updated from `{ to }` to `{ to, from }`. If you have custom Vuex plugins or watchers explicitly listening to this mutation, their logic may break.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"To programmatically navigate, always use `router.push()`, `router.replace()`, or `router.go()` methods on the `vue-router` instance (`this.$router` in components). Do not attempt to modify `store.state.route` directly.","message":"Since `vuex-router-sync` v2.0.0, the `store.state.route` object is intentionally made immutable. Attempting to directly mutate this object (e.g., `store.state.route.path = '/new-path'`) will not trigger navigation and may lead to errors or inconsistent state.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"You need to augment the Vuex Store interface to include the `route` property. Create a declaration file (e.g., `shims-vuex-router-sync.d.ts`) with:\n```typescript\nimport 'vuex';\nimport { Route } from 'vue-router';\n\ndeclare module 'vuex' {\n interface Store {\n readonly state: S & { route: Route };\n }\n}\n```","cause":"Common TypeScript error when `vuex-router-sync` has been initialized, but the TypeScript compiler doesn't know about the injected `route` property on the Vuex store's state.","error":"Property 'route' does not exist on type 'Store'"},{"fix":"To change the current route, use the `vue-router` instance's methods like `router.push('/new-path')` or `router.replace({ name: 'routeName' })`.","cause":"This error occurs when you attempt to directly modify the `store.state.route` object, which is immutable since v2.0.0.","error":"TypeError: Cannot assign to read only property 'path' of object '#