nuxt-typed-router

Provide a type safe router to Nuxt with auto-generated typed definitions for route names and autocompletion for route params

• NuxtLink route autocomplete and params type-check
• useRouter, useRoute and navigateTo route autocomplete and params type-check
• Supports optional params and catchAll routes
• Out of the box i18n support
• Supports routes extended by config and modules

⚠️ Since v2.1.x, useTypedRouter and useTypedRoute are no longer exported.
The package can now override types from useRouter, useRoute and navigateTo

Documentation

Play with it

Demo repo 🧪 : nuxt-typed-router-demo

Compatibility:

• Nuxt 3
• Nuxt 2 (via nuxt2 branch)

Quick start

For Nuxt 3

yarn add -D nuxt-typed-router
# or
npm install -D nuxt-typed-router
# or
pnpm install -D nuxt-typed-router

Nuxt 2 legacy

Nuxt 2 version is no longer maintained, but still available in nuxt2 branch It only has route name autocomplete functionnality

yarn add -D nuxt-typed-router@legacy
# or
npm install -D nuxt-typed-router@legacy

Configuration

Register the module in the nuxt.config.ts, done!

export default defineNuxtConfig({
  modules: ['nuxt-typed-router'],
});

Roadmap

• Add path autocomplete with TS string templates
• Enforce strong params typing depending of origin route
• Add support for validate in definePageMeta
• Add strict option to prevent path navigation

Development

1. Clone this repository
2. Install dependencies using pnpm
3. Build project for local tests pnpm run test
4. Start dev playground pnpm run prepack && pnpm run dev
5. Build project for deploy pnpm prepack

📑 License

MIT License