@tanstack/react-router 1.160.0 → 1.160.2

package/dist/llms/rules/routing.js

@@ -38,6 +38,10 @@ routes/
 
 And here is a summarized code-based version:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 import { createRootRoute, createRoute } from '@tanstack/react-router'
 
@@ -109,6 +113,81 @@ const filesRoute = createRoute({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+import { createRootRoute, createRoute } from '@tanstack/solid-router'
+
+const rootRoute = createRootRoute()
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'about',
+})
+
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts',
+})
+
+const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '/',
+})
+
+const postRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '$postId',
+})
+
+const postEditorRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts/$postId/edit',
+})
+
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'settings',
+})
+
+const profileRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: 'profile',
+})
+
+const notificationsRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: 'notifications',
+})
+
+const pathlessLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: 'pathlessLayout',
+})
+
+const pathlessLayoutARoute = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  path: 'route-a',
+})
+
+const pathlessLayoutBRoute = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  path: 'route-b',
+})
+
+const filesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'files/$',
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Anatomy of a Route
 
 All other routes other than the root route are configured using the \`createRoute\` function:
@@ -196,6 +275,10 @@ Creating a root route in code-based routing is thankfully the same as doing so i
 
 Unlike file-based routing however, you do not need to export the root route if you don't want to. It's certainly not recommended to build an entire route tree and application in a single file (although you can and we do this in the examples to demonstrate routing concepts in brevity).
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 // Standard root route
 import { createRootRoute } from '@tanstack/react-router'
@@ -212,6 +295,26 @@ export interface MyRouterContext {
 const rootRoute = createRootRouteWithContext<MyRouterContext>()
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+// Standard root route
+import { createRootRoute } from '@tanstack/solid-router'
+
+const rootRoute = createRootRoute()
+
+// Root route with Context
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+import type { QueryClient } from '@tanstack/solid-query'
+
+export interface MyRouterContext {
+  queryClient: QueryClient
+}
+const rootRoute = createRootRouteWithContext<MyRouterContext>()
+\`\`\`
+
+<!-- ::end:framework -->
+
 To learn more about Context in TanStack Router, see the [Router Context](../guide/router-context.md) guide.
 
 ## Basic Routes
@@ -541,14 +644,23 @@ To get started with file-based routing, you'll need to configure your project's
 
 To enable file-based routing, you'll need to be using React with a supported bundler. See if your bundler is listed in the configuration guides below.
 
-[//]: # 'SupportedBundlersList'
+<!-- ::start:framework -->
+
+# React
+
+- [Installation with Vite](../installation/with-vite)
+- [Installation with Rspack/Rsbuild](../installation/with-rspack)
+- [Installation with Webpack](../installation/with-webpack)
+- [Installation with Esbuild](../installation/with-esbuild)
+
+# Solid
 
 - [Installation with Vite](../installation/with-vite)
 - [Installation with Rspack/Rsbuild](../installation/with-rspack)
 - [Installation with Webpack](../installation/with-webpack)
 - [Installation with Esbuild](../installation/with-esbuild)
 
-[//]: # 'SupportedBundlersList'
+<!-- ::end:framework -->
 
 When using TanStack Router's file-based routing through one of the supported bundlers, our plugin will **automatically generate your route configuration through your bundler's dev and build processes**. It is the easiest way to use TanStack Router's route generation features.
 
@@ -558,20 +670,20 @@ If your bundler is not yet supported, you can reach out to us on Discord or GitH
 
 File-based routing requires that you follow a few simple file naming conventions to ensure that your routes are generated correctly. The concepts these conventions enable are covered in detail in the [Route Trees & Nesting](./route-trees.md) guide.
 
-| Feature                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
-| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **\`__root.tsx\`**                   | The root route file must be named \`__root.tsx\` and must be placed in the root of the configured \`routesDirectory\`.                                                                                                                                                                                                                                                                                                         |
-| **\`.\` Separator**                  | Routes can use the \`.\` character to denote a nested route. For example, \`blog.post\` will be generated as a child of \`blog\`.                                                                                                                                                                                                                                                                                                |
-| **\`$\` Token**                      | Route segments with the \`$\` token are parameterized and will extract the value from the URL pathname as a route \`param\`.                                                                                                                                                                                                                                                                                                   |
-| **\`_\` Prefix**                     | Route segments with the \`_\` prefix are considered to be pathless layout routes and will not be used when matching its child routes against the URL pathname.                                                                                                                                                                                                                                                               |
-| **\`_\` Suffix**                     | Route segments with the \`_\` suffix exclude the route from being nested under any parent routes.                                                                                                                                                                                                                                                                                                                            |
-| **\`-\` Prefix**                     | Files and folders with the \`-\` prefix are excluded from the route tree. They will not be added to the \`routeTree.gen.ts\` file and can be used to colocate logic in route folders.                                                                                                                                                                                                                                          |
-| **\`(folder)\` folder name pattern** | A folder that matches this pattern is treated as a **route group**, preventing the folder from being included in the route's URL path.                                                                                                                                                                                                                                                                                     |
-| **\`[x]\` Escaping**                 | Square brackets escape special characters in filenames that would otherwise have routing meaning. For example, \`script[.]js.tsx\` becomes \`/script.js\` and \`api[.]v1.tsx\` becomes \`/api.v1\`.                                                                                                                                                                                                                                |
-| **\`index\` Token**                  | Route segments ending with the \`index\` token (before any file extensions) will match the parent route when the URL pathname matches the parent route exactly. This can be configured via the \`indexToken\` configuration option (supports both strings and regex patterns), see [options](../../../api/file-based-routing.md#indextoken).                                                                                   |
-| **\`.route.tsx\` File Type**         | When using directories to organise routes, the \`route\` suffix can be used to create a route file at the directory's path. For example, \`blog.post.route.tsx\` or \`blog/post/route.tsx\` can be used as the route file for the \`/blog/post\` route. This can be configured via the \`routeToken\` configuration option (supports both strings and regex patterns), see [options](../../../api/file-based-routing.md#routetoken). |
-
-> **💡 Remember:** The file-naming conventions for your project could be affected by what [options](../../../api/file-based-routing.md) are configured.
+| Feature                            | Description                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **\`__root.tsx\`**                   | The root route file must be named \`__root.tsx\` and must be placed in the root of the configured \`routesDirectory\`.                                                                                                                                                                                                                                                                                                   |
+| **\`.\` Separator**                  | Routes can use the \`.\` character to denote a nested route. For example, \`blog.post\` will be generated as a child of \`blog\`.                                                                                                                                                                                                                                                                                          |
+| **\`$\` Token**                      | Route segments with the \`$\` token are parameterized and will extract the value from the URL pathname as a route \`param\`.                                                                                                                                                                                                                                                                                             |
+| **\`_\` Prefix**                     | Route segments with the \`_\` prefix are considered to be pathless layout routes and will not be used when matching its child routes against the URL pathname.                                                                                                                                                                                                                                                         |
+| **\`_\` Suffix**                     | Route segments with the \`_\` suffix exclude the route from being nested under any parent routes.                                                                                                                                                                                                                                                                                                                      |
+| **\`-\` Prefix**                     | Files and folders with the \`-\` prefix are excluded from the route tree. They will not be added to the \`routeTree.gen.ts\` file and can be used to colocate logic in route folders.                                                                                                                                                                                                                                    |
+| **\`(folder)\` folder name pattern** | A folder that matches this pattern is treated as a **route group**, preventing the folder from being included in the route's URL path.                                                                                                                                                                                                                                                                               |
+| **\`[x]\` Escaping**                 | Square brackets escape special characters in filenames that would otherwise have routing meaning. For example, \`script[.]js.tsx\` becomes \`/script.js\` and \`api[.]v1.tsx\` becomes \`/api.v1\`.                                                                                                                                                                                                                          |
+| **\`index\` Token**                  | Route segments ending with the \`index\` token (before any file extensions) will match the parent route when the URL pathname matches the parent route exactly. This can be configured via the \`indexToken\` configuration option (supports both strings and regex patterns), see [options](../api/file-based-routing.md#indextoken).                                                                                   |
+| **\`.route.tsx\` File Type**         | When using directories to organise routes, the \`route\` suffix can be used to create a route file at the directory's path. For example, \`blog.post.route.tsx\` or \`blog/post/route.tsx\` can be used as the route file for the \`/blog/post\` route. This can be configured via the \`routeToken\` configuration option (supports both strings and regex patterns), see [options](../api/file-based-routing.md#routetoken). |
+
+> **💡 Remember:** The file-naming conventions for your project could be affected by what [options](../api/file-based-routing.md) are configured.
 
 ## Dynamic Path Params
 
@@ -764,7 +876,11 @@ Each of these concepts is useful and powerful, and we'll dive into each of them
 
 All other routes, other than the [Root Route](#the-root-route), are configured using the \`createFileRoute\` function, which provides type safety when using file-based routing:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/index.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
@@ -772,6 +888,18 @@ export const Route = createFileRoute('/')({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/index.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+  component: PostsComponent,
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 The \`createFileRoute\` function takes a single argument, the file-route's path as a string.
 
 **❓❓❓ "Wait, you're making me pass the path of the route file to \`createFileRoute\`?"**
@@ -797,6 +925,10 @@ Even though it doesn't have a path, the root route has access to all of the same
 
 To create a root route, call the \`createRootRoute()\` function and export it as the \`Route\` variable in your route file:
 
+<!-- ::start:framework -->
+
+# React
+
 \`\`\`tsx
 // Standard root route
 import { createRootRoute } from '@tanstack/react-router'
@@ -813,6 +945,26 @@ export interface MyRouterContext {
 export const Route = createRootRouteWithContext<MyRouterContext>()
 \`\`\`
 
+# Solid
+
+\`\`\`tsx
+// Standard root route
+import { createRootRoute } from '@tanstack/solid-router'
+
+export const Route = createRootRoute()
+
+// Root route with Context
+import { createRootRouteWithContext } from '@tanstack/solid-router'
+import type { QueryClient } from '@tanstack/solid-query'
+
+export interface MyRouterContext {
+  queryClient: QueryClient
+}
+export const Route = createRootRouteWithContext<MyRouterContext>()
+\`\`\`
+
+<!-- ::end:framework -->
+
 To learn more about Context in TanStack Router, see the [Router Context](../guide/router-context.md) guide.
 
 ## Basic Routes
@@ -821,8 +973,11 @@ Basic routes match a specific path, for example \`/about\`, \`/settings\`, \`/se
 
 Let's take a look at an \`/about\` route:
 
-\`\`\`tsx
-// about.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/about.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/about')({
@@ -834,6 +989,22 @@ function AboutComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/about.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/about')({
+  component: AboutComponent,
+})
+
+function AboutComponent() {
+  return <div>About</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 Basic routes are simple and straightforward. They match the path exactly and render the provided component.
 
 ## Index Routes
@@ -842,8 +1013,11 @@ Index routes specifically target their parent route when it is **matched exactly
 
 Let's take a look at an index route for a \`/posts\` URL:
 
-\`\`\`tsx
-// posts.index.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.index.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 
 // Note the trailing slash, which is used to target index routes
@@ -856,6 +1030,23 @@ function PostsIndexComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.index.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+// Note the trailing slash, which is used to target index routes
+export const Route = createFileRoute('/posts/')({
+  component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+  return <div>Please select a post!</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 This route will be matched when the URL is \`/posts\` exactly.
 
 ## Dynamic Route Segments
@@ -864,7 +1055,11 @@ Route path segments that start with a \`$\` followed by a label are dynamic and
 
 These params are then usable in your route's configuration and components! Let's look at a \`posts.$postId.tsx\` route:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts/$postId')({
@@ -881,6 +1076,27 @@ function PostComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  // In a loader
+  loader: ({ params }) => fetchPost(params.postId),
+  // Or in a component
+  component: PostComponent,
+})
+
+function PostComponent() {
+  // In a component!
+  const { postId } = Route.useParams()
+  return <div>Post ID: {postId()}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 > 🧠 Dynamic segments work at **each** segment of the path. For example, you could have a route with the path of \`/posts/$postId/$revisionId\` and each \`$\` segment would be captured into the \`params\` object.
 
 ## Splat / Catch-All Routes
@@ -903,8 +1119,12 @@ For example, a route targeting the \`files/$\` path is a splat route. If the URL
 
 Optional path parameters allow you to define route segments that may or may not be present in the URL. They use the \`{-$paramName}\` syntax and provide flexible routing patterns where certain parameters are optional.
 
-\`\`\`tsx
-// posts.{-$category}.tsx - Optional category parameter
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.{-$category}.tsx"
+// The \`-$category\` segment is optional, so this route matches both \`/posts\` and \`/posts/tech\`
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts/{-$category}')({
@@ -918,17 +1138,55 @@ function PostsComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.{-$category}.tsx"
+// The \`-$category\` segment is optional, so this route matches both \`/posts\` and \`/posts/tech\`
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/{-$category}')({
+  component: PostsComponent,
+})
+
+function PostsComponent() {
+  const { category } = Route.useParams()
+
+  return <div>{category ? \`Posts in \${category()}\` : 'All Posts'}</div>
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 This route will match both \`/posts\` (category is \`undefined\`) and \`/posts/tech\` (category is \`"tech"\`).
 
 You can also define multiple optional parameters in a single route:
 
-\`\`\`tsx
-// posts.{-$category}.{-$slug}.tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.{-$category}.\${-$slug}.tsx"
+// The \`-$category\` segment is optional, so this route matches both \`/posts\` and \`/posts/tech\`
+import { createFileRoute } from '@tanstack/react-router'
+
 export const Route = createFileRoute('/posts/{-$category}/{-$slug}')({
   component: PostsComponent,
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.{-$category}.\${-$slug}.tsx"
+// The \`-$category\` segment is optional, so this route matches both \`/posts\` and \`/posts/tech\`
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/{-$category}/{-$slug}')({
+  component: PostsComponent,
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 This route matches \`/posts\`, \`/posts/tech\`, and \`/posts/tech/hello-world\`.
 
 > 🧠 Routes with optional parameters are ranked lower in priority than exact matches, ensuring that more specific routes like \`/posts/featured\` are matched before \`/posts/{-$category}\`.
@@ -957,7 +1215,11 @@ In the tree above, \`app.tsx\` is a layout route that wraps two child routes, \`
 
 This tree structure is used to wrap the child routes with a layout component:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/app.tsx"
 import { Outlet, createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/app')({
@@ -974,6 +1236,27 @@ function AppLayoutComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/app.tsx"
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/app')({
+  component: AppLayoutComponent,
+})
+
+function AppLayoutComponent() {
+  return (
+    <div>
+      <h1>App Layout</h1>
+      <Outlet />
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 The following table shows which component(s) will be rendered based on the URL:
 
 | URL Path         | Component                |
@@ -1028,7 +1311,11 @@ In the tree above, \`_pathlessLayout.tsx\` is a pathless layout route that wraps
 
 The \`_pathlessLayout.tsx\` route is used to wrap the child routes with a Pathless layout component:
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/_pathlessLayout.tsx"
 import { Outlet, createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_pathlessLayout')({
@@ -1045,6 +1332,27 @@ function PathlessLayoutComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/_pathlessLayout.tsx"
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_pathlessLayout')({
+  component: PathlessLayoutComponent,
+})
+
+function PathlessLayoutComponent() {
+  return (
+    <div>
+      <h1>Pathless layout</h1>
+      <Outlet />
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 The following table shows which component will be rendered based on the URL:
 
 | URL Path | Component             |
@@ -1124,7 +1432,11 @@ routes/
 
 We can import from the excluded files into our posts route
 
-\`\`\`tsx
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="src/routes/posts.tsx"
 import { createFileRoute } from '@tanstack/react-router'
 import { PostsTable } from './-posts-table'
 import { PostsHeader } from './-components/header'
@@ -1148,6 +1460,34 @@ function PostComponent() {
 }
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="src/routes/posts.tsx"
+import { createFileRoute } from '@tanstack/solid-router'
+import { PostsTable } from './-posts-table'
+import { PostsHeader } from './-components/header'
+import { PostsFooter } from './-components/footer'
+
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div>
+      <PostsHeader />
+      <PostsTable posts={posts} />
+      <PostsFooter />
+    </div>
+  )
+}
+\`\`\`
+
+<!-- ::end:framework -->
+
 The excluded files will not be added to \`routeTree.gen.ts\`.
 
 ## Pathless Route Group Directories
@@ -1229,8 +1569,11 @@ Virtual file routes can be configured either via:
 
 If you're using the \`TanStackRouter\` plugin for Vite/Rspack/Webpack, you can configure virtual file routes by passing the path of your routes file to the \`virtualRoutesConfig\` option when setting up the plugin:
 
-\`\`\`tsx
-// vite.config.ts
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="vite.config.ts"
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { tanstackRouter } from '@tanstack/router-plugin/vite'
@@ -1246,6 +1589,26 @@ export default defineConfig({
 })
 \`\`\`
 
+# Solid
+
+\`\`\`tsx title="vite.config.ts"
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      target: 'solid',
+      virtualRouteConfig: './routes.ts',
+    }),
+    solid(),
+  ],
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 Or, you choose to define the virtual routes directly in the configuration:
 
 \`\`\`tsx
@@ -1264,6 +1627,48 @@ export default defineConfig({
 })
 \`\`\`
 
+<!-- ::start:framework -->
+
+# React
+
+\`\`\`tsx title="vite.config.ts"
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+const routes = rootRoute('root.tsx', [
+  // ... the rest of your virtual route tree
+])
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({ virtualRouteConfig: routes, target: 'react' }),
+    react(),
+  ],
+})
+\`\`\`
+
+# Solid
+
+\`\`\`tsx title="vite.config.ts"
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+const routes = rootRoute('root.tsx', [
+  // ... the rest of your virtual route tree
+])
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({ virtualRouteConfig: routes, target: 'solid' }),
+    solid(),
+  ],
+})
+\`\`\`
+
+<!-- ::end:framework -->
+
 ## Creating Virtual File Routes
 
 To create virtual file routes, you'll need to import the \`@tanstack/virtual-file-routes\` package. This package provides a set of functions that allow you to create virtual routes that reference real files in your project. A few utility functions are exported from the package: