or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-vuex-router-sync

Effortlessly keep vue-router and vuex store in sync.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vuex-router-sync@5.0.x

To install, run

npx @tessl/cli install tessl/npm-vuex-router-sync@5.0.0

index.mddocs/

vuex-router-sync

vuex-router-sync provides seamless synchronization between Vue Router and Vuex store state, enabling developers to access current route information directly from the Vuex store. It creates an immutable route module in the store that automatically updates when navigation occurs, eliminating the need for manual route state management.

Package Information

  • Package Name: vuex-router-sync
  • Package Type: npm
  • Language: JavaScript with TypeScript definitions
  • Installation: npm install vuex-router-sync

Core Imports

import { sync } from 'vuex-router-sync';

For TypeScript:

import { sync, type SyncOptions } from 'vuex-router-sync';

For CommonJS:

const { sync } = require('vuex-router-sync');

Basic Usage

import { sync } from 'vuex-router-sync';
import store from './vuex/store'; // vuex store instance
import router from './router';    // vue-router instance

// Sync router and store - returns unsync callback
const unsync = sync(store, router);

// Route information is now available in store
console.log(store.state.route.path);   // current path
console.log(store.state.route.params); // current params
console.log(store.state.route.query);  // current query

// Later, during app teardown
unsync(); // Clean up synchronization

Architecture

vuex-router-sync works by:

  1. Module Registration: Creates a route module in the Vuex store containing current route state
  2. Bidirectional Sync: Watches for changes in both router navigation and store state
  3. Immutable State: Route state is frozen and immutable, derived from the URL as the source of truth
  4. Cleanup Support: Returns an unsync function for proper resource cleanup

The synchronized route state includes:

  • path - Current route path
  • params - Route parameters object
  • query - Query parameters object
  • fullPath - Complete path including query and hash
  • hash - URL hash
  • name - Route name
  • meta - Route metadata
  • from - Previous route (during navigation)

Capabilities

Synchronization

Creates synchronization between Vue Router and Vuex store.

/**
 * Synchronizes Vue Router and Vuex store state
 * @param {Object} store - Vuex store instance
 * @param {Object} router - Vue Router instance
 * @param {SyncOptions} [options] - Configuration options
 * @returns {() => void} Unsync callback function for cleanup
 */
function sync(store, router, options);
/**
 * TypeScript declaration for sync function
 */
function sync(
  store: Store<any>,
  router: VueRouter,
  options?: SyncOptions
): () => void;

Usage Examples:

import { sync } from 'vuex-router-sync';

// Basic synchronization with default module name 'route'
const unsync = sync(store, router);

// Custom module name
const unsync = sync(store, router, { moduleName: 'router' });

// Access route data from store
store.state.route.path;      // "/users/123"
store.state.route.params;    // { id: "123" }
store.state.route.query;     // { tab: "profile" }
store.state.route.fullPath;  // "/users/123?tab=profile#settings"

Types

import { Store } from 'vuex';
import VueRouter from 'vue-router';

interface SyncOptions {
  /** Name of the module to register in Vuex store (defaults to 'route') */
  moduleName?: string;
}

interface RouteState {
  /** Current route name */
  name: string | null;
  /** Current route path */
  path: string;
  /** URL hash */
  hash: string;
  /** Query parameters object */
  query: Record<string, string | (string | null)[]>;
  /** Route parameters object */
  params: Record<string, string>;
  /** Full path including query and hash */
  fullPath: string;
  /** Route metadata */
  meta: any;
  /** Previous route (when navigating) */
  from?: RouteState;
}

Error Handling

The sync function assumes valid Vuex store and Vue Router instances. No specific errors are thrown, but improper usage may lead to:

  • Store module registration failures if the store is not properly initialized
  • Router hook registration failures if the router is not properly initialized
  • Memory leaks if the returned unsync function is not called during cleanup

Peer Dependencies

  • vue-router ^3.0.0
  • vuex ^3.0.0