New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
nuxt-typed-router
Advanced tools
nuxt-typed-router - npm Package Compare versions
to
0.1.14
| { | ||
| "name": "nuxt-typed-router", | ||
| "version": "0.1.13", | ||
| "version": "0.1.14", | ||
| "description": "Provide autocompletion for pages route names generated by Nuxt router", | ||
@@ -25,11 +25,9 @@ "main": "lib/module.js", | ||
| "typings": "types/index.d.ts", | ||
| "devDependencies": { | ||
| "chalk": "^3.0.0", | ||
| "lodash": "^4.17.15", | ||
| "prettier": "^1.19.1", | ||
| "vue-router": "^3.1.3" | ||
| }, | ||
| "dependencies": { | ||
| "log-symbols": "^4.0.0" | ||
| "chalk": "^4.1.0", | ||
| "lodash": "^4.17.20", | ||
| "log-symbols": "^4.0.0", | ||
| "prettier": "^2.1.2", | ||
| "vue-router": "^3.4.9" | ||
| } | ||
| } |
128
README.md
@@ -67,66 +67,2 @@ # 🚦Typed Router Module | ||
| ## - `$typedRouter` (Default) | ||
| A global `$typedRouter` method is added to the Nuxt context and is accessible in your components and context. It's an alias of Vue `$router`, but the typings are modified so the `name` options is typed with the routes names generated from the pages directory | ||
| ### _Why not directly modifying the types of `$router` and `$route` ?_ | ||
| That was the idea when I builded this module initially, but I got confronted with Typescript limitations for modifying already defined third-party lib typings. | ||
| If I wanted to modify vue-router types, i could have just written this: | ||
| ```typescript | ||
| declare module 'vue-router/types' { | ||
| export interface Location { | ||
| name: 'login' | 'home'; | ||
| } | ||
| } | ||
| ``` | ||
| Unfortunately that's not possible, Typescript throws this errors: | ||
| - `Subsequent property declarations must have the same type. Property 'name' must be of type 'string', but here has type '"login" | "home"` | ||
| - `All declarations of 'name' must have identical modifiers` | ||
| So the only way for now is to have an alternative `$typedRouter`, or a global enum-like object. | ||
| ### _Requirements_ | ||
| For your IDE to augment the Vue types, you need to explicitly import the module in your Nuxt config | ||
| ```javascript | ||
| // nuxt.config.js | ||
| import 'nuxt-typed-router'; | ||
| ``` | ||
| ### _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 | ||
| ## - `routerPagesNames` global object | ||
@@ -208,2 +144,66 @@ | ||
| ## - `$typedRouter` | ||
| A global `$typedRouter` method is added to the Nuxt context and is accessible in your components and context. It's an alias of Vue `$router`, but the typings are modified so the `name` options is typed with the routes names generated from the pages directory | ||
| ### _Why not directly modifying the types of `$router` and `$route` ?_ | ||
| That was the idea when I builded this module initially, but I got confronted with Typescript limitations for modifying already defined third-party lib typings. | ||
| If I wanted to modify vue-router types, i could have just written this: | ||
| ```typescript | ||
| declare module 'vue-router/types' { | ||
| export interface Location { | ||
| name: 'login' | 'home'; | ||
| } | ||
| } | ||
| ``` | ||
| Unfortunately that's not possible, Typescript throws this errors: | ||
| - `Subsequent property declarations must have the same type. Property 'name' must be of type 'string', but here has type '"login" | "home"` | ||
| - `All declarations of 'name' must have identical modifiers` | ||
| So the only way for now is to have an alternative `$typedRouter`, or a global enum-like object. | ||
| ### _Requirements_ | ||
| For your IDE to augment the Vue types, you need to explicitly import the module in your Nuxt config | ||
| ```javascript | ||
| // nuxt.config.js | ||
| import 'nuxt-typed-router'; | ||
| ``` | ||
| ### _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 | ||
@@ -210,0 +210,0 @@ |
No alert changes
Improved metrics
- Dev dependency count
0
-100%Worsened metrics
- Total package byte prevSize
14038
-0.27%- Dependency count
5
400%