Fixed composable import, moved to outDir

README.md

@@ -46,7 +46,7 @@ npm install -D nuxt-typed-router@legacy
 
 # Configuration
 
-First, register the module in the `nuxt.config.[js|ts]`
+First, register the module in the `nuxt.config.ts`
 
 ```ts
 import TypedRouter from 'nuxt-typed-router';
@@ -77,10 +77,12 @@ interface ModuleOptions {
 
 # Generated files
 
-The module will create 2 files:
+The module will generate 4 files each time you modify the `pages` folder :
 
-- `__routes.ts` with the global object of the route names inside.
-- `typed-router.d.ts` containing the global typecript definitions and exports
+- `~/<outDir>/__routes.ts` with the global object of the route names inside.
+- `~/<outDir>/__useTypedRouter.ts` Composable tu simply access your typed routes
+- `~/<outDir>/typed-router.d.ts` containing the global typecript definitions and exports
+- `~/plugins/__typed_router.ts` Plugin that will inject `$typedRouter` and `$routesList` (`@nuxt/kit` has problems registering plugin templates so this is a workaround)
 
 # Usage in Vue/Nuxt
 
@@ -122,7 +124,7 @@ Given this structure
         │   └── login.vue
         └── ...
 
-The generated file will look like this
+The generated route list will look like this
 
 ```ts
 export const routerPagesNames = {
@@ -158,7 +160,8 @@ export type TypedRouteList =
 
 ```vue
 <script lang="ts">
-import { useTypedRouter } from 'nuxt-typed-router/hook';
+// The path here is `~/generated` because I set `outDir: './generated'` in my module options
+import { useTypedRouter } from '~/generated';
 
 export default defineComponent({
   setup() {
@@ -210,7 +213,7 @@ Exemple with `pinia` store here
 
 ```ts
 import pinia from 'pinia';
-import { useTypedRouter } from 'nuxt-typed-router/hook';
+import { useTypedRouter } from '~/generated';
 
 export const useFooStore = defineStore('foo', {
   actions: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "scripts": {
@@ -17,18 +17,13 @@
     ".": {
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
-    },
-    "./hook": {
-      "import": "./hook.mjs"
     }
   },
   "main": "./dist/module.cjs",
   "types": "./main.d.ts",
   "files": [
     "dist",
-    "main.d.ts",
-    "hook.mjs",
-    "hook.d.ts"
+    "main.d.ts"
   ],
   "publishConfig": {
     "access": "public"

playground/generated/__routes.ts

@@ -1,5 +1,7 @@
 /**
- * Generated by nuxt-typed-router. Do not modify
+ * ---------------------
+ * 🚗🚦 Generated by nuxt-typed-router. Do not modify !
+ * ---------------------
  * */
 
 export const routerPagesNames = {

playground/generated/__useTypedRouter.ts

@@ -0,0 +1,54 @@
+/**
+ * ---------------------
+ * 🚗🚦 Generated by nuxt-typed-router. Do not modify !
+ * ---------------------
+ * */
+
+import { useNuxtApp } from '#app';
+import { TypedRouter, RouteListDecl } from './typed-router';
+
+/** Returns instances of $typedRouter and $routesList fully typed to use in your components or your Vuex/Pinia store
+ *
+ * @exemple
+ *
+ * ```ts
+ * const { router, routes } = useTypedRouter();
+ * ```
+ */
+export const useTypedRouter = (): {
+  /** Export of $router with type check */
+  router: TypedRouter;
+  /** Contains a typed dictionnary of all your route names (for syntax sugar) */
+  routes: RouteListDecl;
+} => {
+  const { $router } = useNuxtApp();
+
+  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,
+  } as any;
+};

playground/generated/index.ts

@@ -0,0 +1,8 @@
+/**
+ * ---------------------
+ * 🚗🚦 Generated by nuxt-typed-router. Do not modify !
+ * ---------------------
+ * */
+
+export * from './__routes';
+export * from './__useTypedRouter';

playground/generated/typed-router.d.ts

@@ -1,5 +1,7 @@
 /**
- * Generated by nuxt-typed-router. Do not modify
+ * ---------------------
+ * 🚗🚦 Generated by nuxt-typed-router. Do not modify !
+ * ---------------------
  * */
 
 import type {
@@ -71,7 +73,7 @@ type TypedRouteLocationRaw<T extends TypedRouteList> = RouteQueryAndHash &
   TypedLocationAsRelativeRaw<T> &
   RouteLocationOptions;
 
-interface TypedRouter {
+export interface TypedRouter {
   /**
    * Remove an existing route by its name.
    *
@@ -132,11 +134,3 @@ declare module '@vue/runtime-core' {
     $routesList: RouteListDecl;
   }
 }
-declare module 'nuxt-typed-router/hook' {
-  declare const useTypedRouter: () => {
-    /** Export of $router with type check */
-    router: TypedRouter;
-    /** Contains a typed dictionnary of all your route names (for syntax sugar) */
-    routes: RouteListDecl;
-  };
-}

playground/pages/index.vue

@@ -5,13 +5,14 @@
 </template>
 
 <script setup lang="ts">
-import { useTypedRouter } from '../../dist/runtime/useTypedRouter';
-import { callOutsideComponent } from '../store';
+import { useTypedRouter } from '~/generated';
+import { callOutsideComponent } from '~~/store';
 
 const { router, routes } = useTypedRouter();
 function navigate() {
   // console.log($typedRouter, $routesList);
   // router.push({ name: 'activate' });
+  router.push({ name: routes.activate });
   callOutsideComponent();
 }
 </script>

playground/plugins/__typed-router.ts

@@ -1,3 +1,9 @@
+/**
+ * ---------------------
+ * 🚗🚦 Generated by nuxt-typed-router. Do not modify !
+ * ---------------------
+ * */
+
 import { defineNuxtPlugin } from '#app';
 
 export default defineNuxtPlugin((nuxtApp) => {

playground/store/index.ts

@@ -1,5 +1,4 @@
-import { useNuxtApp } from '#app';
-import { useTypedRouter } from '../../dist/runtime/useTypedRouter';
+import { useTypedRouter } from '~/generated';
 
 export function callOutsideComponent() {
   // const { $typedRouter, $routesList, $router } = useNuxtApp();

src/generators/nuxtHook.ts

@@ -10,10 +10,12 @@ import { constructRouteMap } from './main.generator';
 import {
   createDeclarationRoutesFile,
   createRuntimeHookFile,
+  createRuntimeIndexFile,
   createRuntimePluginFile,
   createRuntimeRoutesFile,
 } from './output.generator';
 
+// @ts-ignore
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 export function routeHook(outDir: string, routesObjectName: string, srcDir: string, nuxt: Nuxt) {
@@ -41,22 +43,21 @@ export function routeHook(outDir: string, routesObjectName: string, srcDir: stri
           );
         });
 
-        await saveRouteFiles(
-          runtimeDir,
-          'useTypedRouter.mjs',
-          createRuntimeHookFile(routesDeclTemplate)
-        );
+        await Promise.all([
+          saveRouteFiles(outDir, '__useTypedRouter.ts', createRuntimeHookFile(routesDeclTemplate)),
+          saveRouteFiles(
+            outDir,
+            `__routes.ts`,
+            createRuntimeRoutesFile({ routesList, routesObjectTemplate, routesObjectName })
+          ),
+          saveRouteFiles(
+            outDir,
+            `typed-router.d.ts`,
+            createDeclarationRoutesFile({ routesDeclTemplate, routesList, routesParams })
+          ),
+          saveRouteFiles(outDir, 'index.ts', createRuntimeIndexFile()),
+        ]);
 
-        await saveRouteFiles(
-          outDir,
-          `__routes.ts`,
-          createRuntimeRoutesFile({ routesList, routesObjectTemplate, routesObjectName })
-        );
-        await saveRouteFiles(
-          outDir,
-          `typed-router.d.ts`,
-          createDeclarationRoutesFile({ routesDeclTemplate, routesList, routesParams })
-        );
         console.log(logSymbols.success, `[typed-router] Routes definitions generated`);
       } else {
         console.log(

src/generators/output.generator.ts

@@ -3,6 +3,7 @@ import { signatureTemplate, staticDeclarations, staticDeclImports } from './outp
 
 export function createRuntimePluginFile(routesDeclTemplate: string): string {
   return `
+  ${signatureTemplate}
   import { defineNuxtPlugin } from '#app';
 
   export default defineNuxtPlugin((nuxtApp) => {
@@ -20,23 +21,45 @@ export function createRuntimePluginFile(routesDeclTemplate: string): string {
 
 export function createRuntimeHookFile(routesDeclTemplate: string): string {
   return `
-  import { getCurrentInstance } from 'vue';
+  ${signatureTemplate}
   import { useNuxtApp } from '#app';
-
-  export const useTypedRouter = () => {
+  import { TypedRouter, RouteListDecl } from './typed-router';
+
+  /** Returns instances of $typedRouter and $routesList fully typed to use in your components or your Vuex/Pinia store
+   * 
+   * @exemple
+   * 
+   * \`\`\`ts
+   * const { router, routes } = useTypedRouter();
+   * \`\`\`
+   */
+  export const useTypedRouter = (): {
+    /** Export of $router with type check */
+    router: TypedRouter,
+    /** Contains a typed dictionnary of all your route names (for syntax sugar) */
+    routes: RouteListDecl
+  } => {
     const { $router } = useNuxtApp();
 
     const routesList = ${routesDeclTemplate};
 
     return {
       router: $router,
       routes: routesList,
-    };
+    } as any;
   };
 
   `;
 }
 
+export function createRuntimeIndexFile(): string {
+  return `
+  ${signatureTemplate}
+  export * from './__routes';
+  export * from './__useTypedRouter';
+  `;
+}
+
 export function createRuntimeRoutesFile({
   routesList,
   routesObjectTemplate,

src/generators/output.templates.ts

@@ -1,6 +1,10 @@
 export const signatureTemplate = `/** 
-  * Generated by nuxt-typed-router. Do not modify 
-  * */`;
+  * ---------------------
+  * 🚗🚦 Generated by nuxt-typed-router. Do not modify !
+  * ---------------------
+  * */
+ 
+`;
 
 export const staticDeclImports = `
 import type {
@@ -27,7 +31,7 @@ export const staticDeclarations = `
     TypedLocationAsRelativeRaw<T> &
     RouteLocationOptions;
   
-  interface TypedRouter {
+  export interface TypedRouter {
     /**
      * Remove an existing route by its name.
      *
@@ -88,12 +92,4 @@ export const staticDeclarations = `
       $routesList: RouteListDecl;
     }
   }
-  declare module 'nuxt-typed-router/hook' {
-    declare const useTypedRouter: () => {
-      /** Export of $router with type check */
-      router: TypedRouter,
-      /** Contains a typed dictionnary of all your route names (for syntax sugar) */
-      routes: RouteListDecl
-    };
-  }
   `;