vue-router

Name: vue-router
Availability: InStock
Author: TanStack

Enable type-safe client-side routing in Vue apps with TanStack Router bindings.

14.9k|1.8k|Updated Jan 14, 2019

Search Tags:#routing #vue #type-safety #composables #tanstack-router #router-provider

Ready to run

npx skills add https://github.com/TanStack/router --skill vue-router-tanstack

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-router
Source: https://github.com/TanStack/router/tree/main/packages/vue-router/skills/vue-router
Command: npx skills add https://github.com/TanStack/router --skill vue-router-tanstack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue apps often struggle with integrating a strong, type-safe router that works cleanly with Vue components and composition APIs. TanStack Router bindings for Vue provide a cohesive, type-inferred routing experience across the app.

Core Features & Use Cases

Vue bindings for RouterProvider, useRouter, useLocation, and other composables
Type inference for route params, loaders, and matches across components
Client-first routing with Vue patterns (Ref<T> returns, provide/inject, and JSX/TSX support)
Supports Vue-specific patterns and render-function usage for maximum flexibility

Quick Start

Install and set up the plugin, then create a root route and mount via RouterProvider.

Frequently Asked Questions about vue-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add type-safe routing to my Vue app?▼

Type-safe routing in Vue is achieved by integrating TanStack Router bindings to enforce type inference for route params, loaders, and matches across components. This provides a cohesive developer experience using Vue composables like useRouter and RouterProvider.

Can I use Vue composition API patterns with TanStack Router?▼

Yes, TanStack Router supports Vue composition API patterns by returning Ref<T> objects and utilizing provide/inject mechanisms. It includes Vue-specific bindings like useRouter and useLocation composables for maximum flexibility within your components.

How do I set up a typed router in a TypeScript Vue project?▼

To set up a typed router in a TypeScript Vue project, install the TanStack Router bindings, create a root route, and mount your application via the RouterProvider. This configuration enforces type safety across navigation and route matching.

Does TanStack Router work with Vue render functions and TSX?▼

Yes, TanStack Router bindings for Vue explicitly support render-function usage and TSX. This allows developers to build type-inferred routing structures while leveraging Vue-specific patterns for maximum flexibility in component rendering.

What is the best way to handle type inference for route params in Vue?▼

The best way to handle type inference for route params in Vue is using TanStack Router's typed bindings. It automatically infers types for params, loaders, and matches across your components, solving the struggle of integrating a strong type-safe router cleanly.