{"id":26258849,"url":"https://github.com/blankeos/vike-routegen","last_synced_at":"2026-07-17T05:02:22.788Z","repository":{"id":281410338,"uuid":"945187148","full_name":"Blankeos/vike-routegen","owner":"Blankeos","description":"🥏 Typesafe routes for Vike inspired by TanStack Start/Router. (Experiment, might become part of Vike or just a separate extension, still exploring).","archived":false,"fork":false,"pushed_at":"2025-03-08T22:18:35.000Z","size":506,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-08T22:26:39.110Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blankeos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-08T21:20:16.000Z","updated_at":"2025-03-08T22:18:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"c10f96be-ebee-4ac1-9acb-f79abbce7123","html_url":"https://github.com/Blankeos/vike-routegen","commit_stats":null,"previous_names":["blankeos/vike-routegen"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Blankeos/vike-routegen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fvike-routegen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fvike-routegen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fvike-routegen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fvike-routegen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blankeos","download_url":"https://codeload.github.com/Blankeos/vike-routegen/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fvike-routegen/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265105762,"owners_count":23712202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-13T22:14:49.983Z","updated_at":"2026-07-17T05:02:22.775Z","avatar_url":"https://github.com/Blankeos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vike Routegen\n\n![banner](_docs/banner.png)\n\nA typesafe routing utility for [Vike](https://vike.dev) applications. Inspired by TanStack Start.\n\nForewarned, this is more like a temporary. For me, it's currently a feature-complete solution and I'll be using it for my projects. That's why it's published under a scoped package name.\n\nBut this also serves as an experiment for adding this into Vike's core.\n[Vike is planning to make this a built-in feature](https://github.com/vikejs/vike/issues/698).\n\n## Why Vike-Routegen?\n\n- ✨ **Zero dependencies.** a thin, transparent layer.\n- 🔗 **Typesafe links _anywhere_.** arrays, hrefs, matching, whatever you need.\n- 💡 **Won’t hide or wrap your `\u003ca\u003e` components.** thinly layered on your app without breaking existing types.\n- ⚡ **Fully code-generated.** for maximum type safety and zero runtime overhead, will still work in case of breaking changes.\n\n## Installation\n\n```bash\nnpm install -D @blankeos/vike-routegen\n```\n\nAdd the plugin to your Vite config:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from \"vite\";\nimport vikeRoutegen from \"@blankeos/vike-routegen\";\n\nexport default defineConfig({\n  plugins: [\n    // ...\n    vike(),\n    vikeRoutegen(), // Has sensible defaults + automatic detection (solid/react/vue), so it can be zero-config.\n  ],\n});\n```\n\n## Usage\n\nOnce installed, Vike Routegen will automatically generate a route tree file that provides typesafe routing utilities for your application.\n\n### API\n\n#### `getRoute()`\n\nGenerates typesafe route URLs based on your Vike pages:\n\n```tsx\nimport { getRoute } from \"./route-tree.gen\";\n\n// Regular route\nconst homeUrl = getRoute(\"/\");\n// 👉 Result: \"/\"\n\n// Route with params\nconst postUrl = getRoute(\"/blog/@slug\", {\n  params: { slug: \"my-awesome-post\" },\n});\n// 👉 Result: \"/blog/my-awesome-post\"\n\n// Route with search params\nconst searchUrl = getRoute(\"/search\", {\n  search: { query: \"vike\", category: \"framework\" },\n});\n// 👉 Result: \"/search?query=vike\u0026category=framework\"\n\n// Catch-all route\nconst docsUrl = getRoute(\"/docs/@\", {\n  params: { \"@\": [\"guide\", \"getting-started\"] },\n});\n// 👉 Result: \"/docs/guide/getting-started\"\n```\n\n#### `useParams()`\n\nAccess route parameters with full type safety:\n\n```tsx\nimport { useParams } from './route-tree.gen'\n\nfunction BlogPost() {\n  // For routes like /blog/@slug\n  const { slug } = useParams({ from: '/blog/@slug' }) // 📝 Quick tip: Avoid destructuring like this in SolidJS.\n\n  // For catch-all routes like /docs/@ (e.g. /docs/a/b)\n  // segments is ['a', 'b']\n  // fullPath is '/a/b'\n  const { '@': segments, '_@': fullPath } = useParams({ from: '/docs/@' }) // 📝 Quick tip: Avoid destructuring like this in SolidJS.\n\n  return (\n    // Your component using the params\n  )\n}\n```\n\n\u003e ![NOTE]\n\u003e There are gotchas with SolidJS for reactivity to work with useParams.\n\u003e Make sure to not \"destructure\" the result. Also write the code like:\n\u003e\n\u003e ```tsx\n\u003e const routeParams = useParams({ from: \"/docs/@\" });\n\u003e routeParams().id; // It's an accessor.\n\u003e ```\n\n## Optional Configuration\n\nThis is designed to work out-of-the-box with Vike and the\nstandard vike extensions, but you can also do the following.\n\n```ts\nvikeRoutegen({\n  // Import source for usePageContext (used to generate useParams)\n  // This is actually auto-detected from your vite.config.ts, but in cases\n  // where it doesn't detect it correctly, just explicitly write it here like so:\n  usePageContextImportSource?: \"vike-react/usePageContext\",\n\n  // Output path for the generated file\n  // Defaults to 'src/route-tree.gen.ts' if 'src' exists, otherwise 'route-tree.gen.ts'\n  outputPath?: \"src/routes.generated.ts\",\n});\n```\n\nSet `usePageContextImportSource` to `false` to disable the `useParams` utility. If you're not using\none of the standard vike extensions (vike-react, vike-solid, vike-vue).\n\nBUGS I NOTICED:\n\n- Catch all when it's on pages/@ (so something like pages/all/+route.ts = export default '\\*'), it doesn't work.\n- The `from` in useParams should be completely independent from what is being generated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblankeos%2Fvike-routegen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblankeos%2Fvike-routegen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblankeos%2Fvike-routegen/lists"}