nuxt-typed-router 2.1.4 → 2.2.0-beta.0

package/README.md

@@ -22,7 +22,7 @@
 - `useRouter`, `useRoute` and `navigateTo` route autocomplete and params type-check
 - Supports optional params and catchAll routes
 - Infer route params based on route name
-- Supports routes defined in `config.extendRoutes`
+- Supports routes extended by config and modules
 
 > ⚠️ Since `v2.1.x`, `useTypedRouter` and `useTypedRoute` are no longer exported.   
 The package can now override types from `useRouter`, `useRoute` and `navigateTo`
@@ -89,6 +89,12 @@ export default defineNuxtConfig({
 ```
 
 
+# Roadmap
+
+- [ ] Add `path` autocomplete with TS string templates
+- [ ] Enforce strong params typing depending of origin route
+
+
 ## Development
 
 1. Clone this repository

package/dist/module.json

@@ -5,5 +5,5 @@
     "nuxt": "^3.0.0-rc.1",
     "bridge": false
   },
-  "version": "2.1.4"
+  "version": "2.2.0-beta.0"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { extendPages, defineNuxtModule, createResolver } from '@nuxt/kit';
+import { addPluginTemplate, extendPages, defineNuxtModule, createResolver } from '@nuxt/kit';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
 import prettier from 'prettier';
@@ -8,104 +8,23 @@ import { dirname, resolve } from 'pathe';
 import mkdirp from 'mkdirp';
 import { camelCase } from 'lodash-es';
 
-const watermarkTemplate = `
-  // @ts-nocheck
-  // eslint-disable
-  /** 
-  * ---------------------------------------------------
-  * \u{1F697}\u{1F6A6} Generated by nuxt-typed-router. Do not modify !
-  * ---------------------------------------------------
-  * */
- 
-`;
-
-function createDeclarationRoutesFile(autoImport) {
+function createRoutesNamesListExport(routesList) {
   return `
-    ${watermarkTemplate}
-    
-    import type { NuxtLinkProps } from '#app';
-    import type { DefineComponent } from 'vue';
-    import type { RouteLocationRaw } from 'vue-router';
-    import type { TypedRouteNamedMapper } from './__routes';
-    import { useRoute as _useRoute } from './__useTypedRoute';
-    import { useRouter as _useRouter } from './__useTypedRouter';
-    import { navigateTo as _navigateTo } from './__utils';
-
-    declare global {
- 
-      ${autoImport ? `const useRoute: typeof _useRoute;
-            const useRouter: typeof _useRouter;
-            const navigateTo: typeof _navigateTo;` : ""}
-    }
-    
-    type TypedNuxtLinkProps = Omit<NuxtLinkProps, 'to'> & {
-      to: string | Omit<Exclude<RouteLocationRaw, string>, 'name'> & TypedRouteNamedMapper;
-    };
-    
-    export type _NuxtLink = DefineComponent<
-      TypedNuxtLinkProps,
-      {},
-      {},
-      import('vue').ComputedOptions,
-      import('vue').MethodOptions,
-      import('vue').ComponentOptionsMixin,
-      import('vue').ComponentOptionsMixin,
-      {},
-      string,
-      import('vue').VNodeProps &
-        import('vue').AllowedComponentProps &
-        import('vue').ComponentCustomProps,
-      Readonly<TypedNuxtLinkProps>,
-      {}
-    >;
-    
-    declare module '@vue/runtime-core' {
-      export interface GlobalComponents {
-        NuxtLink: _NuxtLink;
-      }
-    }
-  `;
+  /**
+   * Exhaustive list of all the available route names in the app
+   * */
+  export type RoutesNamesList = ${routesList.map((m) => `'${m}'`).join("|\n")}`;
 }
 
-function createRuntimeIndexFile() {
+function createRoutesParamsRecordExport(routesParams) {
   return `
-  ${watermarkTemplate}
-  export { routesNames } from './__routes';
-  export type { TypedRouteList, TypedRouteNamedMapper, TypedRouteParams } from './__routes';
-  export {useRouter} from './__useTypedRouter';
-  export {useRoute} from './__useTypedRoute';
-  export type {TypedRoute, TypedRouter, TypedNamedRoute } from './__router';
-  export * from './__utils';
-  `;
-}
-
-function createRuntimePluginFile(routesDeclTemplate) {
-  return `
-  ${watermarkTemplate}
-  import { defineNuxtPlugin, useRouter, useRoute } from '#app';
-  import {TypedRouter, TypedRoute} from '@typed-router';
-
-  export default defineNuxtPlugin(() => {
-    const router = useRouter();
-    const route = useRoute();
-    const routesNames = ${routesDeclTemplate};
-
-    return {
-      provide: {
-        typedRouter: router as TypedRouter,
-        typedRoute: route as TypedRoute,
-        routesNames,
-      },
-    };
-  });
-  `;
-}
-
-function createTypedRouteListExport(routesList) {
-  return `export type TypedRouteList = ${routesList.map((m) => `'${m}'`).join("|\n")}`;
-}
-function createTypedRouteParamsExport(routesParams) {
-  return `export type TypedRouteParams = {
+  /** 
+   * Routes params are only required for the exact targeted route name,
+   * vue-router behaviour allow to navigate between children routes without the need to provide all the params every time.
+   * So we can't enforce params when navigating between routes, only a \`[xxx].vue\` page will have required params in the type definition
+   * 
+   * */
+  export type RoutesParamsRecord = {
     ${routesParams.map(
     ({ name, params }) => `"${name}": ${params.length ? `{
                 ${params.map(
@@ -115,8 +34,14 @@ function createTypedRouteParamsExport(routesParams) {
   ).join(",\n")}
   }`;
 }
-function createTypedRouteNamedMapperExport(routesParams) {
-  return `export type TypedRouteNamedMapper = 
+
+function createRoutesNamedLocationsExport(routesParams) {
+  return `
+  /**
+   * Discriminated union that will allow to infer params based on route name
+   * It's used for programmatic navigation like router.push or <NuxtLink/>
+   * */
+  export type RoutesNamedLocations = 
     ${routesParams.map(
     ({ name, params }) => `{name: "${name}" ${params.length ? `, params${params.some((s) => s.required) ? "" : "?"}: {
           ${params.map(
@@ -126,10 +51,16 @@ function createTypedRouteNamedMapperExport(routesParams) {
   ).join("|\n")}
   `;
 }
-function createResolvedTypedRouteNamedMapperExport(routesParams) {
-  return `export type ResolvedTypedRouteNamedMapper = 
+
+function createRoutesNamedLocationsResolvedExport(routesParams) {
+  return `
+  /**
+   * Type returned by a resolved Route that will allow to type guard the route name.
+   * By default the params are unknown
+   * */
+  export type RoutesNamedLocationsResolved = 
   {
-    name: TypedRouteList;
+    name: RoutesNamesList;
     params: unknown;
   } & (
     ${routesParams.map(
@@ -143,172 +74,102 @@ function createResolvedTypedRouteNamedMapperExport(routesParams) {
   `;
 }
 
-function createRuntimeRoutesFile({
+function createRoutesTypesFile({
   routesList,
   routesObjectTemplate,
   routesDeclTemplate,
   routesParams
 }) {
-  return `
-    ${watermarkTemplate}
+  return (
+    /* typescript */
+    `
+    ${createRoutesNamesListExport(routesList)}
 
-    export const routesNames = ${routesObjectTemplate};
-
-    ${createTypedRouteListExport(routesList)}
-
-    export type RouteListDecl = ${routesDeclTemplate};
-
-    /** 
-     * Routes params are only required for the exact targeted route name,
-     * vue-router behaviour allow to navigate between children routes without the need to provide all the params every time.
-     * So we can't enforce params when navigating between routes, only a \`[xxx].vue\` page will have required params in the type definition
-     * 
-     * 
-     * */
-    ${createTypedRouteParamsExport(routesParams)}
+    ${createRoutesParamsRecordExport(routesParams)}
 
-    ${createTypedRouteNamedMapperExport(routesParams)}
-
-    ${createResolvedTypedRouteNamedMapperExport(routesParams)}
-  `;
-}
-
-function createUseTypedRouteFile(routesDeclTemplate) {
-  return `
-  ${watermarkTemplate}
-  import { useRoute as defaultRoute } from '#app';
-  import type { TypedRouteList } from './__routes';
-  import type {TypedRoute, TypedNamedRoute} from './__router'
-
-  /** Acts the same as \`useRoute\`, but typed.
- *
- * @exemple
- *
- * \`\`\`ts
- * const route = useRoute();
- * \`\`\`
- *
- * \`\`\`ts
- * const route = useRoute('my-route-with-param-id');
- * route.params.id // autocompletes!
- * \`\`\`
- *
- * \`\`\`ts
- * const route = useRoute();
- * if (route.name === 'my-route-with-param-id') {
- *    route.params.id // autocompletes!
- * }
- * \`\`\`
- */
-export function useRoute<T extends TypedRouteList = never>(
-  name?: T
-): [T] extends [never] ? TypedRoute : TypedNamedRoute<T> {
-  const route = defaultRoute();
-
-  return route as any;
-}
+    ${createRoutesNamedLocationsExport(routesParams)}
 
+    ${createRoutesNamedLocationsResolvedExport(routesParams)}
 
-`;
-}
+   
 
-function createRuntimeUseTypedRouterFile(routesDeclTemplate) {
-  return `
-  ${watermarkTemplate}
-  import { useRouter as defaultRouter } from '#app';
-  import type { TypedRouter } from './__router';
+    export type RoutesNamesListRecord = ${routesDeclTemplate};
 
-  /** Returns instances of $typedRouter and $routesList fully typed to use in your components or your Vuex/Pinia store
-   * 
-   * @exemple
-   * 
-   * \`\`\`ts
-   * const router = useRouter();
-   * \`\`\`
-   */
-  export function useRouter(): TypedRouter {
-    const router = defaultRouter();
-
-    return router;
-  };
-
-  `;
+    export const routesNames = ${routesObjectTemplate};
+  `
+  );
 }
 
-function createRuntimeRouterTypes() {
-  return `
+function createTypedRouterFile() {
+  return (
+    /* typescript */
+    `
+  
+  import type { Ref } from 'vue';
   import type {
     NavigationFailure,
     RouteLocation,
     RouteLocationNormalizedLoaded,
-    RouteLocationOptions,
     RouteLocationRaw,
-    RouteQueryAndHash,
     Router,
   } from 'vue-router';
   import type {
-    ResolvedTypedRouteNamedMapper,
-    TypedRouteList,
-    TypedRouteNamedMapper,
-    TypedRouteParams,
+    RoutesNamedLocations,
+    RoutesNamedLocationsResolved,
+    RoutesNamesList,
+    RoutesParamsRecord,
   } from './__routes';
+  import type { HasOneRequiredParameter } from './__types_utils';
 
-  // Type utils
-  type ExtractRequiredParameters<T extends Record<string, any>> = Pick<
-    T,
-    { [K in keyof T]: undefined extends T[K] ? never : K }[keyof T]
-  >;
-  
-  type HasOneRequiredParameter<T extends TypedRouteList> = [TypedRouteParams[T]] extends [never]
-    ? false
-    : [keyof ExtractRequiredParameters<TypedRouteParams[T]>] extends [undefined]
-    ? false
-    : true;
-  
-  type TypedLocationAsRelativeRaw<T extends TypedRouteList> = {
+
+  // - Routes location for navigation types (ex: router.push or navigateTo)
+
+  /** 
+   * RouteLocationRaw with discrimanated name and params properties 
+   * {@link RouteLocationRaw}
+   * */
+  export type TypedRouteLocationRaw =
+  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & RoutesNamedLocations)
+  | string;
+
+  /**
+   * Alternative version of {@link TypedRouteLocationRaw} but with a name generic
+   */
+  export type TypedRouteLocationRawFromName<T extends RoutesNamesList> =
+  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & TypedLocationAsRelativeRaw<T>)
+  | string;
+
+  /** 
+   * Generic providing inference and dynamic inclusion of \`params\` property
+   * {@link import('vue-router').LocationAsRelativeRaw} 
+   * */
+  export type TypedLocationAsRelativeRaw<T extends RoutesNamesList> = {
     name?: T;
-  } & ([TypedRouteParams[T]] extends [never]
+  } & ([RoutesParamsRecord[T]] extends [never]
     ? {}
     : HasOneRequiredParameter<T> extends false
-    ? { params?: TypedRouteParams[T] }
-    : { params: TypedRouteParams[T] });
-  
-  type ResolvedTypedLocationAsRelativeRaw<T extends TypedRouteList> = {
-    name?: T;
-  } & ([TypedRouteParams[T]] extends [never] ? {} : { params: TypedRouteParams[T] });
-  
-  export type TypedNamedRouteLocation<T extends TypedRouteList> =
-  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & TypedLocationAsRelativeRaw<T>)
-  | string;
-  
-  type TypedRouteLocationRaw =
-    | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & TypedRouteNamedMapper)
-    | string;
-  
-  type _TypedRoute = Omit<RouteLocationNormalizedLoaded, 'name' | 'params'> &
-    ResolvedTypedRouteNamedMapper;
-  type _TypedNamedRoute<T extends TypedRouteList> = Omit<
-    RouteLocationNormalizedLoaded,
-    'name' | 'params'
-  > &
-    ResolvedTypedLocationAsRelativeRaw<T>;
+    ? { params?: RoutesParamsRecord[T] }
+    : { params: RoutesParamsRecord[T] });
+
   
-  /** Augmented Router interface */
-  interface _TypedRouter
+  /** Augmented Router with typed methods
+   * {@link Router}
+   */
+  export interface TypedRouter
     extends Omit<Router, 'removeRoute' | 'hasRoute' | 'resolve' | 'push' | 'replace' | 'currentRoute'> {
-    readonly currentRoute: _TypedRoute;
+    readonly currentRoute: Ref<TypedRoute>;
     /**
      * Remove an existing route by its name.
      *
      * @param name - Name of the route to remove
      */
-    removeRoute(name: TypedRouteList): void;
+    removeRoute(name: RoutesNamesList): void;
     /**
      * Checks if a route with a given name exists
      *
      * @param name - Name of the route to check
      */
-    hasRoute(name: TypedRouteList): boolean;
+    hasRoute(name: RoutesNamesList): boolean;
     /**
      * Returns the {@link RouteLocation | normalized version} of a
      * {@link RouteLocationRaw | route location}. Also includes an \`href\` property
@@ -318,12 +179,10 @@ function createRuntimeRouterTypes() {
      * @param to - Raw route location to resolve
      * @param currentLocation - Optional current location to resolve against
      */
-    resolve(
-      to: TypedRouteLocationRaw,
-      currentLocation?: RouteLocationNormalizedLoaded
-    ): RouteLocation & {
-      href: string;
-    };
+    resolve<T extends RoutesNamesList>(
+      to: TypedRouteLocationRawFromName<T>,
+      currentLocation?: TypedRoute
+    ): TypedRouteLocationFromName<T>;
     /**
      * Programmatically navigate to a new URL by pushing an entry in the history
      * stack.
@@ -339,28 +198,298 @@ function createRuntimeRouterTypes() {
      */
     replace(to: TypedRouteLocationRaw): Promise<NavigationFailure | void | undefined>;
   }
+
+
+
+  // - Resolved normalized routes for current Location (ex: useRoute and currentRoute)
   
-  export interface TypedRouter extends _TypedRouter {}
-  export type TypedRoute = _TypedRoute;
-  export type TypedNamedRoute<T extends TypedRouteList> = _TypedNamedRoute<T>;
-  `;
+  
+
+  /**
+   * Clone of {@link RouteLocationNormalizedLoaded} with a discriminated union for name and params
+   */
+  export type TypedRoute = Omit<RouteLocationNormalizedLoaded, 'name' | 'params'> &
+    RoutesNamedLocationsResolved;
+
+  /**
+   * Clone of {@link TypedRoute} with generic param for route name that can dynamicaly add params property
+   */
+  export type TypedRouteFromName<T extends RoutesNamesList> = Omit<
+    RouteLocationNormalizedLoaded,
+    'name' | 'params'
+  > &
+  TypedResolvedMatcherLocation<T>;
+
+  /** 
+   * Generic providing inference and dynamic inclusion of \`params\` property
+   * {@link import('vue-router').LocationAsRelativeRaw} 
+   * */
+  export type TypedResolvedMatcherLocation<T extends RoutesNamesList> = {
+    name: T;
+  } & ([RoutesParamsRecord[T]] extends [never] ? {} : { params: RoutesParamsRecord[T] });
+  
+
+  /** 
+   * Clone of {@link RouteLocation} with generic param for route name that can dynamicaly add params property
+   * Used by Router.resolve
+   * */
+  export type TypedRouteLocationFromName<T extends RoutesNamesList> = TypedRouteFromName<T> & {href: string};
+  `
+  );
 }
 
-function createRuntimeNavigateToFunction() {
-  return `
-    ${watermarkTemplate}
+function createTypedRouterDefinitionFile({ autoImport, plugin }) {
+  return (
+    /* typescript */
+    `
+    
+    import type { NuxtLinkProps } from '#app';
+    import type { DefineComponent } from 'vue';
+    import type { RouteLocationRaw } from 'vue-router';
+    import type { RoutesNamedLocations, RoutesNamesListRecord } from './__routes';
+    import type {TypedRouter, TypedRoute} from './__router';
+    import { useRoute as _useRoute } from './__useTypedRoute';
+    import { useRouter as _useRouter } from './__useTypedRouter';
+    import { navigateTo as _navigateTo } from './__navigateTo';
+
+    declare global {
+ 
+      ${autoImport ? (
+      /* typescript */
+      `
+            const useRoute: typeof _useRoute;
+            const useRouter: typeof _useRouter;
+            const navigateTo: typeof _navigateTo;`
+    ) : ""}
+    }
+    
+    type TypedNuxtLinkProps = Omit<NuxtLinkProps, 'to'> & {
+      to: string | Omit<Exclude<RouteLocationRaw, string>, 'name'> & RoutesNamedLocations;
+    };
+    
+    export type TypedNuxtLink = DefineComponent<
+      TypedNuxtLinkProps,
+      {},
+      {},
+      import('vue').ComputedOptions,
+      import('vue').MethodOptions,
+      import('vue').ComponentOptionsMixin,
+      import('vue').ComponentOptionsMixin,
+      {},
+      string,
+      import('vue').VNodeProps &
+        import('vue').AllowedComponentProps &
+        import('vue').ComponentCustomProps,
+      Readonly<TypedNuxtLinkProps>,
+      {}
+    >;
+    
+    declare module '@vue/runtime-core' {
+      export interface GlobalComponents {
+        NuxtLink: TypedNuxtLink;
+      }
+    }
+
+    ${plugin ? (
+      /* typescript */
+      `
+          interface CustomPluginProperties {
+            $typedRouter: TypedRouter,
+            $typedRoute: TypedRoute,
+            $routesNames: RoutesNamesListRecord
+          }
+          declare module '#app' {
+            interface NuxtApp extends CustomPluginProperties {}
+          }
+          declare module 'vue' {
+            interface ComponentCustomProperties extends CustomPluginProperties {}
+          }
+        `
+    ) : ""}
+  `
+  );
+}
+
+function createIndexFile() {
+  return (
+    /* typescript */
+    `
+
+  export type {
+    TypedLocationAsRelativeRaw,
+    TypedResolvedMatcherLocation,
+    TypedRoute,
+    TypedRouteFromName,
+    TypedRouteLocationFromName,
+    TypedRouteLocationRaw,
+    TypedRouteLocationRawFromName,
+    TypedRouter,
+  } from './__router';
+  export { routesNames } from './__routes';
+  export type {
+    RoutesNamedLocations,
+    RoutesNamedLocationsResolved,
+    RoutesNamesList,
+    RoutesNamesListRecord,
+    RoutesParamsRecord,
+  } from './__routes';
+  export { useRoute } from './__useTypedRoute';
+  export { useRouter } from './__useTypedRouter';
+  export { navigateTo } from './__navigateTo';
+  `
+  );
+}
+
+function createPluginFile() {
+  return (
+    /* typescript */
+    `
+  
+  import { defineNuxtPlugin, useRouter, useRoute } from '#app';
+  import {TypedRouter, TypedRoute, routesNames} from '@typed-router';
+
+  export default defineNuxtPlugin(() => {
+    const router = useRouter();
+    const route = useRoute();
+
+    return {
+      provide: {
+        typedRouter: router as TypedRouter,
+        typedRoute: route as TypedRoute,
+        routesNames,
+      },
+    };
+  });
+  `
+  );
+}
+
+function createUseTypedRouteFile(routesDeclTemplate) {
+  return (
+    /* typescript */
+    `
+  import { useRoute as defaultRoute } from '#app';
+  import type { RoutesNamesList } from './__routes';
+  import type {TypedRoute, TypedRouteFromName} from './__router'
+
+  /**
+   * Typed clone of \`useRoute\`
+   *
+   * @exemple
+   *
+   * \`\`\`ts
+   * const route = useRoute();
+   * \`\`\`
+   *
+   * \`\`\`ts
+   * const route = useRoute('my-route-with-param-id');
+   * route.params.id // autocompletes!
+   * \`\`\`
+   *
+   * \`\`\`ts
+   * const route = useRoute();
+   * if (route.name === 'my-route-with-param-id') {
+   *    route.params.id // autocompletes!
+   * }
+   * \`\`\`
+   */
+  export function useRoute<T extends RoutesNamesList = never>(
+    name?: T
+  ): [T] extends [never] ? TypedRoute : TypedRouteFromName<T> {
+    const route = defaultRoute();
+
+    return route as any;
+  }
+`
+  );
+}
+
+function createUseTypedRouterFile(routesDeclTemplate) {
+  return (
+    /* typescript */
+    `
+  
+  import { useRouter as defaultRouter } from '#app';
+  import type { TypedRouter } from './__router';
+
+  /** 
+   * Typed clone of \`useRouter\`
+   * 
+   * @exemple
+   * 
+   * \`\`\`ts
+   * const router = useRouter();
+   * \`\`\`
+   */
+  export function useRouter(): TypedRouter {
+    const router = defaultRouter();
+
+    return router;
+  };
+
+  `
+  );
+}
+
+function createNavigateToFile() {
+  return (
+    /* typescript */
+    `
     import { navigateTo as defaultNavigateTo } from '#app';
-    import { NavigateToOptions } from 'nuxt/dist/app/composables/router';
-    import { NavigationFailure } from 'vue-router';
-    import type { TypedNamedRouteLocation } from './__router';
-    import { TypedRouteList } from './__routes';
+    import type { NavigateToOptions } from 'nuxt/dist/app/composables/router';
+    import type { NavigationFailure } from 'vue-router';
+    import type { TypedRouteLocationRawFromName, TypedRouteFromName } from './__router';
+    import type { RoutesNamesList } from './__routes';
 
-    export const navigateTo: <T extends TypedRouteList>(
-      to: TypedNamedRouteLocation<T>,
+    /** 
+   * Typed clone of \`navigateTo\`
+   * 
+   * @exemple
+   * 
+   * \`\`\`ts
+   * const resolved = navigateTo({name: 'foo', params: {foo: 'bar'}});
+   * \`\`\`
+   */
+    export const navigateTo: <T extends RoutesNamesList>(
+      to: TypedRouteLocationRawFromName<T>,
       options?: NavigateToOptions
-    ) => Promise<void | NavigationFailure | TypedNamedRoute<T>> = defaultNavigateTo as any;
+    ) => Promise<void | NavigationFailure | TypedRouteFromName<T>> = defaultNavigateTo as any;
 
-  `;
+  `
+  );
+}
+
+function createTypeUtilsRuntimeFile() {
+  return (
+    /* typescript */
+    `
+  
+  import { RoutesNamesList, RoutesParamsRecord } from './__routes';
+
+  // - Type utils
+  export type ExtractRequiredParameters<T extends Record<string, any>> = Pick<
+    T,
+    { [K in keyof T]: undefined extends T[K] ? never : K }[keyof T]
+  >;
+  
+  export type HasOneRequiredParameter<T extends RoutesNamesList> = [RoutesParamsRecord[T]] extends [
+    never
+  ]
+    ? false
+    : [keyof ExtractRequiredParameters<RoutesParamsRecord[T]>] extends [undefined]
+    ? false
+    : true;
+  `
+  );
+}
+
+async function handleAddPlugin() {
+  const pluginName = "__typed-router.plugin.ts";
+  addPluginTemplate({
+    filename: pluginName,
+    getContents: createPluginFile,
+    mode: "all"
+  });
 }
 
 const { resolveConfig, format } = prettier;
@@ -424,32 +553,28 @@ async function writeFile(path, content) {
   }
 }
 
-function handlePluginFileSave({ nuxt, routesDeclTemplate }) {
-  const pluginName = "__typed-router.ts";
-  const srcDir = nuxt.options.srcDir;
-  async function savePlugin() {
-    const pluginFolder = `${srcDir}/plugins`;
-    await processPathAndWriteFile({
-      outDir: pluginFolder,
-      rootDir: srcDir,
-      fileName: pluginName,
-      content: createRuntimePluginFile(routesDeclTemplate)
-    });
-  }
-  nuxt.hook("build:done", savePlugin);
-  nuxt.hook("prepare:types", savePlugin);
-}
+const watermarkTemplate = `
+  // @ts-nocheck
+  // eslint-disable
+  /** 
+  * ---------------------------------------------------
+  * \u{1F697}\u{1F6A6} Generated by nuxt-typed-router. Do not modify !
+  * ---------------------------------------------------
+  * */
+ 
+`;
 
 let previousGeneratedRoutes = "";
 async function saveGeneratedFiles({
   rootDir,
   autoImport,
+  plugin,
   outputData: { routesDeclTemplate, routesList, routesObjectTemplate, routesParams }
 }) {
   const filesMap = [
     {
       fileName: "__useTypedRouter.ts",
-      content: createRuntimeUseTypedRouterFile()
+      content: createUseTypedRouterFile()
     },
     {
       fileName: "__useTypedRoute.ts",
@@ -457,7 +582,7 @@ async function saveGeneratedFiles({
     },
     {
       fileName: `__routes.ts`,
-      content: createRuntimeRoutesFile({
+      content: createRoutesTypesFile({
         routesList,
         routesObjectTemplate,
         routesDeclTemplate,
@@ -465,24 +590,35 @@ async function saveGeneratedFiles({
       })
     },
     {
-      fileName: "__utils.ts",
-      content: createRuntimeNavigateToFunction()
+      fileName: "__navigateTo.ts",
+      content: createNavigateToFile()
     },
     {
       fileName: `__router.d.ts`,
-      content: createRuntimeRouterTypes()
+      content: createTypedRouterFile()
+    },
+    {
+      fileName: `__types_utils.d.ts`,
+      content: createTypeUtilsRuntimeFile()
     },
     {
       fileName: `typed-router.d.ts`,
-      content: createDeclarationRoutesFile(autoImport)
+      content: createTypedRouterDefinitionFile({ autoImport, plugin })
     },
     {
       fileName: "index.ts",
-      content: createRuntimeIndexFile()
+      content: createIndexFile()
     }
   ];
   await Promise.all(
-    filesMap.map(({ content, fileName }) => processPathAndWriteFile({ rootDir, content, fileName }))
+    filesMap.map(({ content, fileName }) => {
+      const waterMakeredContent = `
+        ${watermarkTemplate}
+
+        ${content}
+      `;
+      return processPathAndWriteFile({ rootDir, content: waterMakeredContent, fileName });
+    })
   );
   if (previousGeneratedRoutes !== routesList.join(",")) {
     previousGeneratedRoutes = routesList.join(",");
@@ -668,21 +804,19 @@ async function createTypedRouter({
       nuxt.hook("modules:done", () => {
         createTypedRouter({ nuxt, plugin, isHookCall: true });
       });
+      if (plugin) {
+        await handleAddPlugin();
+      }
       return;
     }
     extendPages(async (routes) => {
       hasRoutesDefined = true;
       const outputData = constructRouteMap(routes);
-      if (plugin) {
-        handlePluginFileSave({
-          nuxt,
-          routesDeclTemplate: outputData.routesDeclTemplate
-        });
-      }
       await saveGeneratedFiles({
         autoImport,
         rootDir,
-        outputData
+        outputData,
+        plugin
       });
     });
     setTimeout(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "2.1.4",
+  "version": "2.2.0-beta.0",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "main": "./dist/module.cjs",
@@ -57,7 +57,7 @@
     "url": "https://github.com/victorgarciaesgi/nuxt-typed-router/issues"
   },
   "dependencies": {
-    "@nuxt/kit": "3.0.0",
+    "@nuxt/kit": "3.1.1",
     "chalk": "^5.2.0",
     "lodash-es": "^4.17.21",
     "log-symbols": "^5.1.0",
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/test-utils": "^3.0.0",
+    "@nuxt/test-utils": "^3.1.1",
     "@nuxt/types": "^2.15.8",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash-es": "^4.17.6",
@@ -78,10 +78,10 @@
     "eslint": "8.32.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
-    "nuxt": "3.0.0",
-    "playwright": "1.29.2",
+    "nuxt": "3.1.1",
+    "playwright": "1.30.0",
     "typescript": "^4.9.4",
-    "vitest": "^0.28.1",
+    "vitest": "^0.28.2",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.0.24"
   }