router-plugin

Generate routes and automatic code splitting for TanStack Router projects.

Updated Apr 2, 2026

Search Tags:#routing #router #webpack #vite #esbuild #code-splitting

Ready to run

npx skills add https://github.com/abereghici/skills --skill router-plugin-abereghici

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router bundler plugin for route generation and automatic code splitting. Configures autoCodeSplitting, routesDirectory, target framework, and code split groupings.

Core Features & Use Cases

File-based routing
Automatic code splitting across Vite, Webpack, Rspack, and esbuild
Consistent plugin ordering and configurable defaults to ensure reliable route generation

Quick Start

Install the plugin and configure it in your Vite/Webpack/Rspack/esbuild setup to enable file-based routing and 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 automatic code splitting for TanStack Router?▼

Automatic code splitting for TanStack Router is configured by installing a bundler plugin that manages route generation and split groupings. It requires explicit configuration of target, routesDirectory, and generatedRouteTree to ensure deterministic builds.

Does the TanStack Router code splitting plugin work with Vite and Webpack?▼

Yes, the TanStack Router code splitting plugin works with Vite, Webpack, Rspack, and esbuild setups. It applies consistent plugin ordering and configurable defaults to ensure reliable file-based route generation across these bundlers.

Can I use file-based routing with Solid or Vue in TanStack Router?▼

File-based routing in TanStack Router supports React, Solid, and Vue ecosystems. You must explicitly configure the target framework alongside routesDirectory and generatedRouteTree to generate the correct route tree.

What is automatic code splitting in a file-based routing setup?▼

Automatic code splitting in a file-based routing setup is the process of dividing bundle code into groupings based on route definitions. The plugin automates this by reading the routesDirectory and applying split configurations during the build.

Why does my TanStack Router build fail without explicit route configuration?▼

TanStack Router builds require deterministic outputs, meaning the plugin needs explicit configuration of target, routesDirectory, and generatedRouteTree. Omitting these settings prevents the plugin from reliably generating the route tree.