nuxt-typed-router

Provide a type safe router to Nuxt with auto-generated typed definitions for route path, name and params

• Supports all programmatic navigation utils (NuxtLink, useRouter, navigateTo, useRoute, useLocalePath, etc...)
• Supports optional params and catchAll routes
• Autocompletes routes paths, names and params
• Throw error if route path is invalid
• Out of the box i18n support
• Supports routes extended by config and modules

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