🧪 Typed Routes

Stage: prototyping

Provides type safe way of building URLs within the application.

Installation

1. npm install github:BuilderIo/qwik-labs-build#main
2. update vite.config.ts

   // ...
   import { qwikTypes } from '@builder.io/qwik-labs/vite'; 
    
   export default defineConfig(() => {
     return {
       plugins: [
        // ...
        qwikTypes() // <== Add `qwikTypes()` to the list of plugins
       ],
       // ...
     };
   });

3. Run build so that it generates ~/routes.gen.d.ts and ~/routes.config.tsx files.
4. To create a typesafe link:

   import { AppLink } from '~/routes.config';
    
   export default component$(() => {
     // ...
     return (
       // ...
       <AppLink route="/your/[appParam]/link/" param:appParam={"some-value"}>
         Link text
       </AppLink>
     );
   });