router-plugin

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

Zur Installation springen

Repository: mehdibha/dotUI
Letzte Quellaktivität: 3. August 2026 um 13:37
Erkannte Sprache von SKILL.md: Englisch
Sterne: 1.354
Forks: 34

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

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

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

devtools-app-setup

Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.

2026-08-03

devtools-vite-plugin

Configure @tanstack/devtools-vite for source inspection (data-tsd-source, inspectHotkey, ignore patterns), console piping (client-to-server, server-to-client, levels), enhanced logging, server event bus (port, host, HTTPS), production stripping (removeDevtoolsOnBuild), editor integration (launch-editor, custom editor.open). Must be FIRST plugin in Vite config. Vite ^6 || ^7 only.

2026-08-03

react-start

React bindings for TanStack Start: createStart, StartClient, StartServer, React-specific imports, re-exports from @tanstack/react-router, full project setup with React, useServerFn hook.

2026-08-03

Alle aus diesem Repository ansehen

// vite.config.ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { tanstackRouter } from "@tanstack/router-plugin/vite"

export default defineConfig({
  plugins: [
    // MUST come before react()
    tanstackRouter({
      target: "react",
      autoCodeSplitting: true,
    }),
    react(),
  ],
})

// webpack.config.js
const { tanstackRouter } = require("@tanstack/router-plugin/webpack")

module.exports = {
  plugins: [
    tanstackRouter({
      target: "react",
      autoCodeSplitting: true,
    }),
  ],
}

// rspack.config.js
const { tanstackRouter } = require("@tanstack/router-plugin/rspack")

module.exports = {
  plugins: [
    tanstackRouter({
      target: "react",
      autoCodeSplitting: true,
    }),
  ],
}

import { tanstackRouter } from "@tanstack/router-plugin/esbuild"
import esbuild from "esbuild"

esbuild.build({
  plugins: [
    tanstackRouter({
      target: "react",
      autoCodeSplitting: true,
    }),
  ],
})

Option	Type	Default	Description
`target`	`'react' \| 'solid' \| 'vue'`	`'react'`	Target framework
`routesDirectory`	`string`	`'./src/routes'`	Directory containing route files
`generatedRouteTree`	`string`	`'./src/routeTree.gen.ts'`	Path for generated route tree
`autoCodeSplitting`	`boolean`	`undefined`	Enable automatic code splitting
`enableRouteGeneration`	`boolean`	`true`	Set to `false` to disable route generation

Option	Type	Default	Description
`routeFilePrefix`	`string`	`undefined`	Prefix filter for route files
`routeFileIgnorePrefix`	`string`	`'-'`	Prefix to exclude files from routing
`routeFileIgnorePattern`	`string`	`undefined`	Pattern to exclude from routing
`indexToken`	`string \| RegExp \| { regex: string; flags?: string }`	`'index'`	Token identifying index routes
`routeToken`	`string \| RegExp \| { regex: string; flags?: string }`	`'route'`	Token identifying route config files

tanstackRouter({
  target: "react",
  autoCodeSplitting: true,
  codeSplittingOptions: {
    // Default groupings for all routes
    defaultBehavior: [["component"], ["errorComponent"], ["notFoundComponent"]],

    // Per-route custom splitting
    splitBehavior: ({ routeId }) => {
      if (routeId === "/dashboard") {
        // Keep loader and component together for dashboard
        return [["loader", "component"], ["errorComponent"]]
      }
      // Return undefined to use defaultBehavior
    },
  },
})

Option	Type	Default	Description
`quoteStyle`	`'single' \| 'double'`	`'single'`	Quote style in generated code
`semicolons`	`boolean`	`false`	Use semicolons in generated code
`disableTypes`	`boolean`	`false`	Disable TypeScript types
`disableLogging`	`boolean`	`false`	Suppress plugin logs
`addExtensions`	`boolean \| string`	`false`	Add file extensions to imports
`enableRouteTreeFormatting`	`boolean`	`true`	Format generated route tree
`verboseFileRoutes`	`boolean`	`undefined`	When `false`, auto-imports `createFileRoute`

import { routes } from "./routes"

tanstackRouter({
  target: "react",
  virtualRouteConfig: routes, // or './routes.ts'
})

import {
  tanstackRouter, // Composed (default)
  tanstackRouterGenerator, // Generator only
  tanStackRouterCodeSplitter, // Code splitter only
  tanstackRouterAutoImport, // Auto-import only
} from "@tanstack/router-plugin/vite"

// WRONG — react() before tanstackRouter()
plugins: [react(), tanstackRouter({ target: "react" })]

// CORRECT — tanstackRouter() first
plugins: [tanstackRouter({ target: "react" }), react()]

// WRONG for Solid — generates React imports
tanstackRouter({ autoCodeSplitting: true })

// CORRECT for Solid
tanstackRouter({ target: "solid", autoCodeSplitting: true })

// WRONG — manual lazy loading with autoCodeSplitting enabled
const LazyAbout = lazyRouteComponent(() => import("./about"))

// CORRECT — just write normal route files, plugin handles splitting
// src/routes/about.tsx
export const Route = createFileRoute("/about")({
  component: AboutPage,
})

function AboutPage() {
  return <h1>About</h1>
}

name	router-plugin
description	TanStack Router bundler plugin for route generation and automatic code splitting. Supports Vite, Webpack, Rspack, and esbuild. Configures autoCodeSplitting, routesDirectory, target framework, and code split groupings.
type	core
library	tanstack-router
library_version	1.166.2
sources	["TanStack/router:packages/router-plugin/src","TanStack/router:docs/router/routing/file-based-routing.md","TanStack/router:docs/router/guide/code-splitting.md"]

name	router-plugin
description	TanStack Router bundler plugin for route generation and automatic code splitting. Supports Vite, Webpack, Rspack, and esbuild. Configures autoCodeSplitting, routesDirectory, target framework, and code split groupings.
type	core
library	tanstack-router
library_version	1.166.2
sources	["TanStack/router:packages/router-plugin/src","TanStack/router:docs/router/routing/file-based-routing.md","TanStack/router:docs/router/guide/code-splitting.md"]

router-plugin

Installationsoptionen

Quelldateien prüfen

Router Plugin (`@tanstack/router-plugin`)

Install

Router Plugin (`@tanstack/router-plugin`)

Install

Bundler Setup

Vite (most common)

Webpack

Rspack

esbuild

Configuration Options

Core Options

File Convention Options

Code Splitting Options

Output Options

Virtual Route Config

How It Works

Individual Plugin Exports

Common Mistakes

1. CRITICAL: Wrong plugin order in Vite config

2. HIGH: Missing target option for non-React frameworks

3. MEDIUM: Confusing autoCodeSplitting with manual lazy routes

Cross-References

router-plugin

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Router Plugin (@tanstack/router-plugin)

Install

Mehr aus diesem Repository

Router Plugin (@tanstack/router-plugin)

Install

Bundler Setup

Vite (most common)

Webpack

Rspack

esbuild

Configuration Options

Core Options

File Convention Options

Code Splitting Options

Output Options

Virtual Route Config

How It Works

Individual Plugin Exports

Common Mistakes

1. CRITICAL: Wrong plugin order in Vite config

2. HIGH: Missing target option for non-React frameworks

3. MEDIUM: Confusing autoCodeSplitting with manual lazy routes

Cross-References

Router Plugin (`@tanstack/router-plugin`)

Router Plugin (`@tanstack/router-plugin`)