🚦Typed Router Module
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 nuxt-typed-router
npm install 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:
type Options = {
filePath?: string;
routesObjectName?: string;
stripAtFromNames?: boolean;
};
Usage in Vue/Nuxt
Nuxt-typed-router provides two ways to have name-based typed routing
For Typescript users
Add nuxt-typed-router/types
to your tsconfig.json
types
{
"types": ["@nuxt/types", "nuxt-typed-router/types"],
}
Javascript Users
- 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
const config = {
typedRouter: {
filePath: './models/__routes.js',
},
};
const config = {
modules: [
[
'nuxt-typed-router',
{
filePath: './models/__routes.js',
},
],
],
};
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 use it from the injected $routeNames
option on your components
export default {
mounted() {
this.$router.push({ name: this.$routeNames.index.content });
},
};
Or you can just import it
import { routerPagesNames } from '~/models/__routes.js';
export default {
mounted() {
this.$router.push({ name: routerPagesNames.index.content });
},
};
Usage
The usage is exactly the same as $router
Given this structure
├── pages
├── index
├── content.vue
├── index.vue
├── communication.vue
├── statistics.vue
├── users.vue
├── index.vue
├── forgotpassword.vue
├── reset-password.vue
│ └── login.vue
└── ...
This module also provide $typedRoute
, wich is an alias to Vue $route
, but with typed name property
Caveats
The generated enum is located in the node_modules
folder.
Because of Intellisense limitations, the types from node_modules are not lived updated, so you need to either reload the window or restart Intellisense when you add a Page/ modify the name of a Page for it to take into account the pages names freshly generated
Development
- Clone this repository
- Install dependencies using
yarn
or npm install
📑 License
MIT License