skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

router-plugin

Enable file-based routing and automatic code splitting for TanStack Router across Vite, Webpack, Rspack, and esbuild.

14.9k|1.8k|Updated Jan 14, 2019
Search Tags:#routing#webpack#vite#bundler#esbuild#code-splitting#rspack
One-click install
npx skills add https://github.com/TanStack/router --skill router-plugin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-plugin
Source: https://github.com/TanStack/router/tree/main/packages/router-plugin/skills/router-plugin
Command: npx skills add https://github.com/TanStack/router --skill router-plugin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reduces manual effort by providing a bundler plugin that powers TanStack Router's file-based routing and automatic code splitting, ensuring consistent route generation across Vite, Webpack, Rspack, and esbuild.

Core Features & Use Cases

  • File-based routing that automatically generates route trees from your project structure and supports multiple bundlers.
  • Automatic code splitting to optimize load times and improve performance in large apps.
  • Guidance on correct plugin order and framework integrations (React, Solid, Vue) to avoid silent failures.
  • Use cases include rapid bootstrapping of routing, scalable project organization, and predictable builds across environments.

Quick Start

Install the router-plugin in your bundler config and enable file-based routing with automatic code splitting.

Frequently Asked Questions about router-plugin

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

FAQPage Schema
How do I set up file-based routing and automatic code splitting for TanStack Router?▼

File-based routing and automatic code splitting for TanStack Router are configured by installing the router-plugin in your bundler config. This automates route tree generation from your project directory to optimize load times.

Does TanStack Router file-based routing work with Vite, Webpack, Rspack, and esbuild?▼

Yes, file-based routing works with Vite, Webpack, Rspack, and esbuild. The router-plugin applies consistent route generation and automatic code splitting across these major bundling environments.

What do I need to generate a valid route tree with the TanStack Router bundler plugin?▼

Generating a valid route tree requires a valid routesDirectory and correct plugin order in your bundler configuration. Without these prerequisites, the router-plugin may experience silent failures during route generation.

Why are my TanStack Router routes not generating correctly during the build?▼

Routes fail to generate due to incorrect plugin order or an invalid routesDirectory. The router-plugin requires correct plugin positioning and a valid routes directory to successfully generate the route tree.

Can I use TanStack Router file-based routing with frameworks other than React?▼

Yes, file-based routing supports broader framework integrations beyond React, including Solid and Vue. The router-plugin provides guidance on framework integrations to ensure predictable builds across environments.

Related Skills

Explore More Software Engineering Skills→
cill-i-amcill-i-am

router-plugin

Generate TanStack Router route trees with automatic code splitting for Vite, Webpack, Rspack, and esbuild.

Community
Advanced
abereghiciabereghici

router-plugin

Generate routes and automatic code splitting for TanStack Router projects.

Community
Advanced
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
lespacemanlespaceman
4

router-core/code-splitting

Implement automatic and manual code-splitting for TanStack Router routes.

Community
Advanced