ntr

nuxt-typed-router

🚦 Provide autocompletion for pages route names generated by Vue router

Showing:

Popularity

Downloads/wk

130

GitHub Stars

19

Maintenance

Last Commit

3mos ago

Contributors

3

Package

Dependencies

4

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

🚦Typed Router Module

npm version npm downloads npm downloads

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

Motivation

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

Installation

yarn add -D nuxt-typed-router

#or
npm install -D nuxt-typed-router

Configuration

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

const config = {
  ...,
  modules: [
    'nuxt-typed-router',
  ]
}

Or

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

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.

Requirements

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: [
    [
      'nuxt-typed-router',
      {
        filePath: './models/__routes.js', // or .ts,
      },
    ],
  ],
};

Usage

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!

Development

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

πŸ“‘ License

MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100