nuxt-typed-router 1.0.1 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# 🚗🚦 Nuxt typed router
+# 🚗🚦 Typed Router for Nuxt 3
 
 [npm-version-src]: https://img.shields.io/npm/v/nuxt-typed-router.svg
 [npm-version-href]: https://www.npmjs.com/package/nuxt-typed-router
@@ -17,6 +17,13 @@
 - 🚚 Expose a global method `$typedRouter` (clone of vue-router), but typed with the routes defined in `pages` directory
 - 🚦 Provides auto-completion and errors for route params in `push` and `replace` methods
 
+<br/>
+<br/>
+<p align="center">
+  <img src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/medias/in-action.gif?raw=true"/>
+</p>
+<br/>
+
 # Installation
 
 ### For Nuxt 3

package/dist/module.json

@@ -5,5 +5,5 @@
     "nuxt": "^3.0.0",
     "bridge": false
   },
-  "version": "1.0.1"
+  "version": "1.0.2"
 }

package/dist/module.mjs

@@ -298,6 +298,22 @@ const staticDeclarations = `
   }
   `;
 
+function createRuntimePluginFile(routesDeclTemplate) {
+  return `
+  import { defineNuxtPlugin } from '#app';
+
+  export default defineNuxtPlugin((nuxtApp) => {
+    const routesList = ${routesDeclTemplate};
+
+    return {
+      provide: {
+        typedRouter: nuxtApp.vueApp.$router,
+        routesList,
+      },
+    };
+  });
+  `;
+}
 function createRuntimeHookFile(routesDeclTemplate) {
   return `
   import { getCurrentInstance } from 'vue';
@@ -373,7 +389,7 @@ function routeHook(outDir, routesObjectName) {
       const pluginPath = resolve(runtimeDir, pluginName);
       await Promise.all([
         saveRouteFiles(runtimeDir, "useTypedRouter.mjs", createRuntimeHookFile(routesDeclTemplate)),
-        saveRouteFiles(runtimeDir, pluginName, createRuntimeHookFile(routesDeclTemplate))
+        saveRouteFiles(runtimeDir, pluginName, createRuntimePluginFile(routesDeclTemplate))
       ]);
       addPluginTemplate({
         src: pluginPath,

package/dist/runtime/typed-router.d.ts

@@ -1,20 +1,34 @@
-import { getCurrentInstance } from 'vue';
+import { defineNuxtPlugin } from '#app';
 
-function useNuxtApp() {
-  const vm = getCurrentInstance();
-  if (!vm) {
-    throw new Error('nuxt instance unavailable');
-  }
-  return vm.appContext.app.$nuxt;
-}
-
-export const useTypedRouter = () => {
-  const { $router } = useNuxtApp();
-
-  const routesList = {};
+export default defineNuxtPlugin((nuxtApp) => {
+  const routesList = {
+    activate: 'activate',
+    index: 'index',
+    childOne: {
+      childOneChildOneSubOne: 'parent-child-one-child-one-sub-one',
+      user: { index: 'parent-child-one-child-one-sub-one-user' },
+      childOneChildOneSubTwo: 'parent-child-one-child-one-sub-two',
+      index: 'parent-child-one',
+    },
+    childTwo: {
+      childTwoId: 'parent-child-two-id',
+      childTwoChildOneSubOne: 'parent-child-two-child-one-sub-one',
+      index: 'parent-child-two',
+      profile: {
+        id: {
+          slug: { index: 'parent-child-two-profile-id-slug' },
+          index: 'parent-child-two-profile-id',
+        },
+        index: 'parent-child-two-profile',
+      },
+    },
+    rootPage: 'rootPage',
+  };
 
   return {
-    router: $router,
-    routes: routesList,
+    provide: {
+      typedRouter: nuxtApp.vueApp.$router,
+      routesList,
+    },
   };
-};
+});

package/dist/runtime/typed-router.mjs

@@ -1,20 +1,34 @@
-import { getCurrentInstance } from 'vue';
+import { defineNuxtPlugin } from '#app';
 
-function useNuxtApp() {
-  const vm = getCurrentInstance();
-  if (!vm) {
-    throw new Error('nuxt instance unavailable');
-  }
-  return vm.appContext.app.$nuxt;
-}
-
-export const useTypedRouter = () => {
-  const { $router } = useNuxtApp();
-
-  const routesList = {};
+export default defineNuxtPlugin((nuxtApp) => {
+  const routesList = {
+    activate: 'activate',
+    index: 'index',
+    childOne: {
+      childOneChildOneSubOne: 'parent-child-one-child-one-sub-one',
+      user: { index: 'parent-child-one-child-one-sub-one-user' },
+      childOneChildOneSubTwo: 'parent-child-one-child-one-sub-two',
+      index: 'parent-child-one',
+    },
+    childTwo: {
+      childTwoId: 'parent-child-two-id',
+      childTwoChildOneSubOne: 'parent-child-two-child-one-sub-one',
+      index: 'parent-child-two',
+      profile: {
+        id: {
+          slug: { index: 'parent-child-two-profile-id-slug' },
+          index: 'parent-child-two-profile-id',
+        },
+        index: 'parent-child-two-profile',
+      },
+    },
+    rootPage: 'rootPage',
+  };
 
   return {
-    router: $router,
-    routes: routesList,
+    provide: {
+      typedRouter: nuxtApp.vueApp.$router,
+      routesList,
+    },
   };
-};
+});

package/dist/runtime/useTypedRouter.d.ts

@@ -11,7 +11,29 @@ function useNuxtApp() {
 export const useTypedRouter = () => {
   const { $router } = useNuxtApp();
 
-  const routesList = {};
+  const routesList = {
+    activate: 'activate',
+    index: 'index',
+    childOne: {
+      childOneChildOneSubOne: 'parent-child-one-child-one-sub-one',
+      user: { index: 'parent-child-one-child-one-sub-one-user' },
+      childOneChildOneSubTwo: 'parent-child-one-child-one-sub-two',
+      index: 'parent-child-one',
+    },
+    childTwo: {
+      childTwoId: 'parent-child-two-id',
+      childTwoChildOneSubOne: 'parent-child-two-child-one-sub-one',
+      index: 'parent-child-two',
+      profile: {
+        id: {
+          slug: { index: 'parent-child-two-profile-id-slug' },
+          index: 'parent-child-two-profile-id',
+        },
+        index: 'parent-child-two-profile',
+      },
+    },
+    rootPage: 'rootPage',
+  };
 
   return {
     router: $router,

package/dist/runtime/useTypedRouter.mjs

@@ -11,7 +11,29 @@ function useNuxtApp() {
 export const useTypedRouter = () => {
   const { $router } = useNuxtApp();
 
-  const routesList = {};
+  const routesList = {
+    activate: 'activate',
+    index: 'index',
+    childOne: {
+      childOneChildOneSubOne: 'parent-child-one-child-one-sub-one',
+      user: { index: 'parent-child-one-child-one-sub-one-user' },
+      childOneChildOneSubTwo: 'parent-child-one-child-one-sub-two',
+      index: 'parent-child-one',
+    },
+    childTwo: {
+      childTwoId: 'parent-child-two-id',
+      childTwoChildOneSubOne: 'parent-child-two-child-one-sub-one',
+      index: 'parent-child-two',
+      profile: {
+        id: {
+          slug: { index: 'parent-child-two-profile-id-slug' },
+          index: 'parent-child-two-profile-id',
+        },
+        index: 'parent-child-two-profile',
+      },
+    },
+    rootPage: 'rootPage',
+  };
 
   return {
     router: $router,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "scripts": {
@@ -8,7 +8,9 @@
     "play:build": "nuxi build playground",
     "prepack": "nuxt-module-build",
     "build:local": "nuxt-module-build --stub && cross-env NUXT_BUILD_TYPE=stub nuxi dev playground",
-    "test": "jest",
+    "init:build": "nuxt-module-build --stub && nuxi prepare playground",
+    "build:test": "cross-env NUXT_BUILD_TYPE=stub yarn init:build && yarn prepack && yarn play:build",
+    "test": "yarn build:test && jest",
     "test:reset": "yarn test --updateSnapshot"
   },
   "exports": {