TypeScript icon, indicating that this package has built-in type declarations

    0.2.25 • Public • Published

    🚦Typed Router Module

    npm version npm downloads npm downloads

    Provide a safe typed router to nuxt with auto-generated typed definitions for route names


    Nuxt is great because it generate the router based on your pages directory. It generates all the pages name and it abstract a lot of boilerplate.

    Problem: If you want a type-safe routing flow, the current model can be hard to maintain if you modify the page file name and is error prone in big projects.

    Solution: Thanks to Nuxt powerful hook system, this module reads all your routes and generate typings and enums accordingly


    yarn add -D nuxt-typed-router
    npm install -D nuxt-typed-router


    First, register the module in the nuxt.config.[js|ts]

    const config = {
      modules: [


    const config = {
      modules: [
        ['nuxt-typed-router', {
          // options


    type Options = {
      // Path to where you cant the file to be saved (ex: "./src/models/__routes.ts")
      filePath?: string;
      // Name of the routesNames object (ex: "routesTree")
      // Default: "routerPagesNames"
      routesObjectName?: string;
      // Strip `@` sign from declared routes (ex: `admin/@home.vue` will be accessed like this `routerPagesNames.admin.home`
      // and the route name will be `admin-home` instead of `admin-@home`)
      // Default: true
      stripAtFromNames?: boolean;

    Usage in Vue/Nuxt

    - routerPagesNames global object

    The module will create a file with the global object of the route names inside.


    You have to specify the path of the generated file in your configuration

    // nuxt.config.js
    const config = {
      typedRouter: {
        filePath: './models/__routes.js', // or .ts,
    // Or
    const config = {
      modules: [
            filePath: './models/__routes.js', // or .ts,


    Given this structure

        ├── pages
            ├── index
                ├── content.vue
                ├── index.vue
                ├── communication.vue
                ├── statistics.vue
                ├── users.vue
            ├── index.vue
            ├── forgotpassword.vue
            ├── reset-password.vue
        │   └── login.vue
        └── ...

    The generated file will look like this

    export const routerPagesNames = {
      forgotpassword: 'forgotpassword',
      login: 'login',
      resetPassword: 'reset-password',
      index: {
        index: 'index',
        communication: 'index-communication',
        content: 'index-content',
        statistics: 'index-statistics',
        users: 'index-users',

    You can now just import it

    import { routerPagesNames } from '~/models/__routes.js';
    export default {
      mounted() {
        this.$router.push({ name: routerPagesNames.index.content });

    Advanced usage

    Create a plugin nuxt-typed-router.js|ts, and register it in your nuxt.config.js

    import { routerPagesNames } from '...your file path';
    export default (ctx, inject) => {
      inject('routesNames', routerPagesNames);

    Then create shims a file in ~/shims/nuxt.d.ts

    import { routerPagesNames } from '...your file path';
    declare module 'vue/types/vue' {
      interface Vue {
        $routesNames: typeof routerPagesNames;

    You will now have $routeNames exposed in all your component without importing it and it will be typed automaticaly!


    1. Clone this repository
    2. Install dependencies using yarn or npm install

    📑 License

    MIT License


    npm i nuxt-typed-router

    DownloadsWeekly Downloads






    Unpacked Size

    18.3 kB

    Total Files


    Last publish


    • desnoth