Type-Safe URLs
summary
Claims a concrete system that makes URL params typed and parsed so pages get numbers, dates or booleans instead of raw strings, implemented as Vue Router Resolvers with param parsers (int, bool, custom) and a build-time generated matcher that moves parsing and sorting to compile time. Demo shows converting ID to number and date params to Date objects, invalid inputs become 404, runtime validation code is removed, bundle size drops ~30% and the router core is ~6KB; demo at https://esm.is/2026-talk-typed-url-demo.
AI-written summary · about
chapters (11)
- 0:00Introduction and welcome
- 1:05Why type-safe URLs matter
- 8:24File-based routing setup
- 13:17Demo: Product ID as integer
- 16:28Demo: Date parsing in events
- 20:23Demo: Query params validation
- 25:44Path vs query parameter rules
- 27:07SEO and URL considerations
- 28:08Vue Router 6 availability
- 29:54Future of bidirectional validators
- 30:15Closing and Q&A
related talks
30mTypesafe state in your URL
07mA New Vue Router
25mType-safe URL state in with nuqs
35mTypeScript Gymnastics: Why Are They So Powerful for You?
26mVue-router and its techniques
31mType Safe URL State Management in React with nuqs
21mType Safe Routing Shenanigans with TanStack Router
27mRouting and new features