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.
npm install vuex-router-syncVerified import paths — ran on the pinned version, not inferred.
Demonstrates basic setup and usage of `vuex-router-sync` to expose the current router state via `store.state.route`.
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.
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`.
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.
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.
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:
```typescript
import 'vuex';
import { Route } from 'vue-router';
declare module 'vuex' {
interface Store<S> {
readonly state: S & { route: Route };
}
}
```To change the current route, use the `vue-router` instance's methods like `router.push('/new-path')` or `router.replace({ name: 'routeName' })`.Ensure you are using `import { sync } from 'vuex-router-sync';` for ESM. For CommonJS (older Node.js), it would be `const { sync } = require('vuex-router-sync');`. Also, verify the package is listed in `package.json` and `node_modules`.Ensure your `vue-router` and `vuex` versions meet the requirements. For `vuex-router-sync` v5.x, you need `vue-router` >= 3.x and `vuex` >= 3.x. Update or downgrade peer dependencies as needed, or consider `npm install --legacy-peer-deps` as a temporary workaround (not recommended for production).