🧪 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.js
    // ...
    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>
      );
    });

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • mhevery