TypeScript Integration

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• src/vite-plugin-routes.ts
• types/helpers.d.ts
• README.md
• src/helpers/path-helpers.ts
• biome.json

Wouter-vue provides a fully typed routing experience for Vue 3 applications. By leveraging TypeScript, the library ensures type safety across navigation hooks, route definitions, and build-time plugins. This integration allows developers to catch routing errors early and benefit from comprehensive IDE autocompletion for component props and composable return values.

The project is configured with a strict TypeScript environment, utilizing the typescript package (v5.9.3) and specialized plugins like vite-plugin-dts to generate and manage declaration files. This ensures that even though the core logic might be written in TypeScript or JavaScript, the consumer always interacts with well-defined types.

Sources: package.json:115, README.md:46

Build System and Type Distribution

The project manages type definitions through a structured export system defined in package.json. It provides specific entry points for different routing strategies (Hash, Browser, Memory) and Server-Side Rendering (SSR), each with its own corresponding .d.ts file.

Type Exports Configuration

The following table describes how types are mapped to their respective modules:

Module Path	Type Definition File	Description
.	./types/index.d.ts	Main entry point for the router
./use-browser-location	./types/use-browser-location.d.ts	Types for standard browser history routing
./use-hash-location	./types/use-hash-location.d.ts	Types for hash-based routing
./memory-location	./types/memory-location.d.ts	Types for in-memory routing (testing/non-browser)
./ssr	./types/ssr.d.ts	Types for Server-Side Rendering support
./vite-plugin-routes	./src/vite-plugin-routes.ts	Types for the Vite build plugin

Sources: package.json:52-84

Vite Plugin Type Safety

The vitePluginRoutes utility is a core part of the TypeScript integration, providing strongly typed options for generating static routes at build time. It uses interfaces to define plugin behavior, ensuring that configuration objects passed to the plugin are valid.

This diagram shows the relationship between the configuration options and the internal data structures used during the route generation process.

Sources: src/vite-plugin-routes.ts:14-60

Helper Utilities and Definitions

Wouter-vue exports a variety of helper utilities that are fully typed to assist in path normalization, prop validation, and environment detection. These are centralized in types/helpers.d.ts to maintain backward compatibility and clear API boundaries.

Key Helper Functions

• Path Normalization: normalizePath(path: string) ensures consistent trailing slash handling and removes query/hash fragments for active state detection.
• Target Resolution: resolveTargetPath handles the logic between href and to props, prioritizing one based on configuration.
• Environment Detection: Utilities like isSSR and isBrowser provide type-safe checks for the execution environment.

Sources: types/helpers.d.ts:7-12, src/helpers/path-helpers.ts:13-33

Development and Linting Standards

The project uses Biome for linting and formatting, with specific rules to enforce TypeScript best practices, such as requiring explicit import types.

Rule Category	Rule Name	Setting	Purpose
Style	useImportType	error	Forces usage of import type for type-only imports
Suspicious	noExplicitAny	warn	Discourages the use of the any type
Correctness	noUnusedVariables	warn	Prevents bloating code with unused definitions

Sources: biome.json:44-58

Navigation Flow and Logic

The TypeScript types support the reactive nature of the Composition API, ensuring that navigation events and state changes are handled correctly within Vue's reactivity system.

This sequence demonstrates how typed helpers validate paths before the router state is updated.

Sources: src/helpers/path-helpers.ts:41-55, README.md:121

The TypeScript integration in wouter-vue ensures a robust development experience by providing detailed type definitions for its minimalist API, covering everything from core components to build-time Vite plugins.