@kitbag/router 0.6.0 → 0.7.1

package/README.md

@@ -11,7 +11,7 @@ Type safe router for Vue.js
 
 ## Getting Started
 
-Get Started with our [documentation](https://kitbag-router.netlify.app/)
+Get Started with our [documentation](https://kitbag-router.netlify.app/) or our [intro video](https://kitbag-router.netlify.app/)
 
 ## Installation
 
@@ -75,26 +75,27 @@ declare module '@kitbag/router' {
 To navigate to another route, you can use `router.push`. This method will update the URL for the browser and also add the URL into the history so when a user uses the back button on their browser it will behave as expected.
 
 ```ts
+import { defineAsyncComponent } from 'vue'
 import { createRoute, useRouter } from '@kitbag/router'
 
 const user = createRoute({
   name: 'user',
   path: '/user',
-  component: ...,
+  component: defineAsyncComponent(() => import('./UserPage.vue')),
 })
 
 const profile = createRoute({
   parent: user,
   name: 'profile',
   path: '/profile',
-  component: ...,
+  component: defineAsyncComponent(() => import('./ProfilePage.vue')),
 })
 
 const settings = createRoute({
   parent: user,
   name: 'settings',
   path: '/settings',
-  component: ...,
+  component: defineAsyncComponent(() => import('./SettingsPage.vue')),
 })
 
 const router = useRouter([user, profile, settings])
@@ -109,14 +110,14 @@ router.push('/user/settings')
 router.push('https://github.com/kitbagjs/router')
 ```
 
-This `source` argument is type safe, expecting either a Url or a valid route "key". Url is any string that starts with "http", "https", or a forward slash "/". Route key is a string of route names joined by a period `.` that lead to a non-disabled route. Additionally if using the route key, push will require params be passed in if there are any.
+This `source` argument is type safe, expecting either a Url or a valid route "key". Url is any string that starts with "http", "https", or a forward slash "/". Route key is a string of route names joined by a period `.`. Additionally if using the route key, push will require params be passed in if there are any.
 
 ## Update
 
 If you only wish to change the params on the current route you can use `router.route.update`.
 
 ```ts
-router.route.update('myParam': 123)
+router.route.update('myParam', 123)
 ```
 
 or for setting multiple params at once
@@ -162,6 +163,6 @@ This component gives the router the power to change the URL without reloading th
 [netlify-badge]: https://api.netlify.com/api/v1/badges/c12f79b8-49f9-4529-bc23-f8ffca8919a3/deploy-status
 [netlify-url]: https://app.netlify.com/sites/kitbag-router/deploys
 [discord-badge]: https://img.shields.io/discord/1079625926024900739?logo=discord&label=Discord
-[discord-url]: https://discord.gg/UT7JrAxU
+[discord-url]: https://discord.gg/zw7dpcc5HV
 [stackblitz-badge]: https://developer.stackblitz.com/img/open_in_stackblitz_small.svg
 [stackblitz-url]: https://stackblitz.com/~/github.com/kitbagjs/router-preview

package/dist/kitbag-router.d.ts

@@ -88,6 +88,8 @@ export declare type AfterRouteHookResponse<TRoutes extends Routes> = RouteHookSu
 
 declare type AllPropertiesAreOptional<T> = Record<string, unknown> extends T ? true : IsEmptyObject<OnlyRequiredProperties<T>>;
 
+declare type AsNamedRoute<T extends Route> = IsRouteUnnamed<T> extends true ? never : T;
+
 /**
  * Represents a function called before a route change, potentially altering the routing operation.
  * @param to - {@link ResolvedRoute} The resolved route the router is navigating to.
@@ -121,6 +123,8 @@ declare type BuiltInRejectionType = typeof builtInRejections[number];
 
 declare type CombineKey<TParentKey extends string | undefined, TChildKey extends string | undefined> = StringHasValue<TParentKey> extends true ? StringHasValue<TChildKey> extends true ? `${TParentKey}.${TChildKey}` : TParentKey : StringHasValue<TChildKey> extends true ? TChildKey : '';
 
+declare type CombineMeta<TParent extends Record<string, unknown>, TChild extends Record<string, unknown>> = TParent & TChild;
+
 declare type CombinePath<TParent extends Path, TChild extends Path> = ToPath<TParent> extends {
     path: infer TParentPath extends string;
     params: infer TParentParams extends Record<string, unknown>;
@@ -139,6 +143,8 @@ declare type CombineQuery<TParent extends Query, TChild extends Query> = ToQuery
 
 declare type CombineQueryString<TParent extends string | undefined, TChild extends string | undefined> = StringHasValue<TParent> extends true ? StringHasValue<TChild> extends true ? `${TParent}&${TChild}` : TParent : TChild;
 
+declare type CombineState<TParent extends Record<string, Param>, TChild extends Record<string, Param>> = TParent & TChild;
+
 /**
  * Creates a component wrapper which has no props itself but mounts another component within while binding its props
  *
@@ -157,13 +163,17 @@ declare type CombineQueryString<TParent extends string | undefined, TChild exten
  * })
  * ```
  */
-export declare function component<TComponent extends Component>(component: TComponent, props: PropsGetter<TComponent>): Component;
+export declare function component<TComponent extends Component>(component: TComponent, props: ComponentPropsGetter<TComponent>): Component;
+
+export declare type ComponentProps<TComponent extends Component> = TComponent extends Constructor ? InstanceType<TComponent>['$props'] : TComponent extends AsyncComponentLoader<infer T extends Component> ? ComponentProps<T> : TComponent extends FunctionalComponent<infer T> ? T : never;
+
+declare type ComponentPropsGetter<TComponent extends Component> = () => MaybePromise<ComponentProps<TComponent>>;
 
 declare type Constructor = new (...args: any) => any;
 
-export declare function createExternalRoute<const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const THost extends string | Host | undefined = undefined>(options: CreateRouteOptionsWithoutParent<TName, TPath, TQuery, THost>): Route<ToKey<TName>, ToHost<THost>, ToPath<TPath>, ToQuery<TQuery>>;
+export declare function createExternalRoute<const THost extends string | Host, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined>(options: CreateRouteOptions<TName, TPath, TQuery> & WithHost<THost> & WithoutParent): Route<ToKey<TName>, ToHost<THost>, ToPath<TPath>, ToQuery<TQuery>>;
 
-export declare function createExternalRoute<const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined>(options: CreateRouteOptionsWithParent<TParent, TName, TPath, TQuery, Host<'', {}>>): Route<CombineKey<TParent['key'], ToKey<TName>>, ToHost<Host<'', {}>>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>>;
+export declare function createExternalRoute<const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined>(options: CreateRouteOptions<TName, TPath, TQuery> & WithoutHost & WithParent<TParent>): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>>;
 
 export declare function createParam<TParam extends ParamWithDefault>(param: TParam): TParam;
 
@@ -171,19 +181,23 @@ export declare function createParam<TParam extends Param>(param: TParam): ParamG
 
 export declare function createParam<TParam extends Param>(param: TParam, defaultValue: ExtractParamType<TParam>): ParamWithDefault<TParam>;
 
-export declare function createRoute<const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined>(options: CreateRouteOptionsWithoutParent<TName, TPath, TQuery>): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>>;
+export declare function createRoute<const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithoutComponents & WithoutParent & (WithState<TState> | WithoutState)): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>, TMeta, TState>;
 
-export declare function createRoute<const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined>(options: CreateRouteOptionsWithParent<TParent, TName, TPath, TQuery>): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>>;
+export declare function createRoute<const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithoutComponents & WithParent<TParent> & (WithState<TState> | WithoutState)): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>, CombineMeta<TMeta, TParent['meta']>, CombineState<TState, TParent['state']>>;
 
-export declare type CreateRouteOptions<TName extends string | undefined = string, TPath extends string | Path | undefined = string | Path | undefined, TQuery extends string | Query | undefined = string | Query | undefined, THost extends string | Host | undefined = string | Host | undefined, _TParent extends Route | undefined = undefined> = WithComponent & WithHooks & {
+export declare function createRoute<TComponent extends Component, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponent<TComponent, RouteParams<TPath, TQuery>> & WithoutParent & (WithState<TState> | WithoutState)): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>, TMeta, TState>;
+
+export declare function createRoute<TComponent extends Component, const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponent<TComponent, RouteParams<TPath, TQuery, TParent>> & WithParent<TParent> & (WithState<TState> | WithoutState)): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>, CombineMeta<TMeta, TParent['meta']>, CombineState<TState, TParent['state']>>;
+
+export declare function createRoute<TComponents extends Record<string, Component>, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponents<TComponents, RouteParams<TPath, TQuery>> & WithoutParent & (WithState<TState> | WithoutState)): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>, TMeta, TState>;
+
+export declare function createRoute<TComponents extends Record<string, Component>, const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponents<TComponents, RouteParams<TPath, TQuery, TParent>> & WithParent<TParent> & (WithState<TState> | WithoutState)): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>, CombineMeta<TMeta, TParent['meta']>, CombineState<TState, TParent['state']>>;
+
+export declare type CreateRouteOptions<TName extends string | undefined = string | undefined, TPath extends string | Path | undefined = string | Path | undefined, TQuery extends string | Query | undefined = string | Query | undefined, TMeta extends RouteMeta = RouteMeta> = {
     /**
      * Name for route, used to create route keys and in navigation.
      */
     name?: TName;
-    /**
-     * Host part of URL.
-     */
-    host?: THost;
     /**
      * Path part of URL.
      */
@@ -195,25 +209,16 @@ export declare type CreateRouteOptions<TName extends string | undefined = string
     /**
      * Represents additional metadata associated with a route, customizable via declaration merging.
      */
-    meta?: RouteMeta;
-    disabled?: boolean;
+    meta?: TMeta;
 };
 
 /**
  * The Route properties originally provided to `createRoute`. The only change is normalizing meta to always default to an empty object.
  */
-export declare type CreateRouteOptionsWithMeta = CreateRouteOptions & {
+declare type CreateRouteOptionsMatched = CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithComponent | WithComponents | WithoutComponents) & (WithParent | WithoutParent) & (WithState | WithoutState) & {
     meta: RouteMeta;
 };
 
-declare type CreateRouteOptionsWithoutParent<TName extends string | undefined = undefined, TPath extends string | Path | undefined = undefined, TQuery extends string | Query | undefined = undefined, THost extends string | Host | undefined = undefined> = CreateRouteOptions<TName, TPath, TQuery, THost> & {
-    parent?: never;
-};
-
-declare type CreateRouteOptionsWithParent<TParent extends Route, TName extends string | undefined = undefined, TPath extends string | Path | undefined = undefined, TQuery extends string | Query | undefined = undefined, THost extends string | Host | undefined = undefined> = CreateRouteOptions<TName, TPath, TQuery, THost, TParent> & {
-    parent: TParent;
-};
-
 /**
  * Creates a router instance for a Vue application, equipped with methods for route handling, lifecycle hooks, and state management.
  *
@@ -334,6 +339,14 @@ declare type ExtractRouteParamTypesWithoutLosingOptional<TRoute> = TRoute extend
     };
 } ? ExtractParamTypesWithoutLosingOptional<HostParams & PathParams & QueryParams> : Record<string, unknown>;
 
+declare type ExtractRouteStateParamsAsOptional<T extends Record<string, Param>> = ExtractParamTypes<{
+    [K in keyof T as K extends string ? `?${K}` : never]: T[K];
+}>;
+
+declare type ExtractStateParams<TRoute> = TRoute extends {
+    state: infer TState extends Record<string, Param>;
+} ? ExtractParamTypes<TState> : Record<string, unknown>;
+
 declare type Host<THost extends string = string, TParams extends HostParamsWithParamNameExtracted<THost> = Record<string, Param | undefined>> = {
     host: THost;
     params: string extends THost ? Record<string, Param> : Identity<ExtractParamsFromHostString<THost, TParams>>;
@@ -376,10 +389,6 @@ export declare function isRoute<TRouteKey extends RegisteredRoutesKey>(route: un
 
 export declare function isRoute(route: unknown, routeKey?: string, options?: IsRouteOptions): boolean;
 
-declare type IsRouteDisabled<T extends Route> = T extends {
-    disabled: true;
-} ? true : false;
-
 declare type IsRouteOptions = {
     exact?: boolean;
 };
@@ -471,6 +480,10 @@ declare const paramStart = "[";
 
 export declare type ParamWithDefault<TParam extends Param = Param> = Required<ParamGetSet<ExtractParamType<TParam>>>;
 
+declare type ParentPath<TParent extends Route | undefined> = TParent extends Route ? TParent['path'] : Path<'', {}>;
+
+declare type ParentQuery<TParent extends Route | undefined> = TParent extends Route ? TParent['query'] : Query<'', {}>;
+
 declare type Path<TPath extends string = string, TParams extends PathParamsWithParamNameExtracted<TPath> = Record<string, Param | undefined>> = {
     path: TPath;
     params: string extends TPath ? Record<string, Param> : Identity<ExtractParamsFromPathString<TPath, TParams>>;
@@ -504,10 +517,6 @@ declare type PathParamsWithParamNameExtracted<TPath extends string> = {
     [K in keyof ExtractParamsFromPathString<TPath> as ExtractParamName<K>]?: Param;
 };
 
-declare type Props<TComponent extends Component> = TComponent extends Constructor ? InstanceType<TComponent>['$props'] : TComponent extends AsyncComponentLoader<infer T extends Component> ? Props<T> : TComponent extends FunctionalComponent<infer T> ? T : never;
-
-declare type PropsGetter<TComponent extends Component> = () => MaybePromise<Props<TComponent>>;
-
 declare type Query<TQuery extends string = string, TQueryParams extends QueryParamsWithParamNameExtracted<TQuery> = Record<string, Param | undefined>> = {
     query: TQuery;
     params: string extends TQuery ? Record<string, Param> : Identity<ExtractQueryParamsFromQueryString<TQuery, TQueryParams>>;
@@ -542,7 +551,7 @@ declare type QueryParamsWithParamNameExtracted<T extends string> = {
 };
 
 /**
- * Represents the state of currently registered router, and rejections. Used to provide correct type context for
+ * Represents the state of currently registered router, rejections, and route meta. Used to provide correct type context for
  * components like `RouterLink`, as well as for composables like `useRouter`, `useRoute`, and hooks.
  *
  * @example
@@ -550,6 +559,8 @@ declare type QueryParamsWithParamNameExtracted<T extends string> = {
  * declare module '@kitbag/router' {
  *   interface Register {
  *     router: typeof router
+ *     rejections: ["NotAuthorized"],
+ *     routeMeta: { public?: boolean }
  *   }
  * }
  * ```
@@ -591,19 +602,12 @@ export declare type RegisteredRouterReplace = RouterReplace<RegisteredRoutes>;
  */
 export declare type RegisteredRouterRoute = RegisteredRouter['route'];
 
-/**
- * Represents the State property registered within {@link Register}
- */
-export declare type RegisteredRouterState = Register extends {
-    state: infer TState;
-} ? TState : {};
-
 /**
  * Represents the Router routes property within {@link Register}
  */
 export declare type RegisteredRoutes = Register extends {
     router: Router<infer TRoutes extends Routes>;
-} ? TRoutes : Route<string, Host, Path, Query, false>[];
+} ? TRoutes : Route[];
 
 /**
  * Represents the union of all possible RouteKeys registered within {@link Register}
@@ -642,6 +646,10 @@ declare type ResolvedRoute<TRoute extends Route = Route> = Readonly<{
      * Key value pair for route params, values will be the user provided value from current browser location.
      */
     params: ExtractRouteParamTypes<TRoute>;
+    /**
+     * Type for additional data intended to be stored in history state.
+     */
+    state: ExtractRouteStateParamsAsOptional<TRoute['state']>;
 }>;
 
 declare type ResolvedRouteQuery = {
@@ -654,18 +662,17 @@ declare type ResolvedRouteQuery = {
  * @template TKey - Represents the unique key identifying the route, typically a string.
  * @template TPath - The type or structure of the route's path.
  * @template TQuery - The type or structure of the query parameters associated with the route.
- * @template TDisabled - Indicates whether the route is disabled, which could affect routing logic.
  */
-export declare type Route<TKey extends string = string, THost extends Host = Host, TPath extends Path = Path, TQuery extends Query = Query, TDisabled extends boolean = boolean> = {
+export declare type Route<TKey extends string = string, THost extends Host = Host, TPath extends Path = Path, TQuery extends Query = Query, TMeta extends RouteMeta = RouteMeta, TState extends Record<string, Param> = Record<string, Param>> = {
     /**
      * The specific route properties that were matched in the current route.
      */
-    matched: CreateRouteOptionsWithMeta;
+    matched: CreateRouteOptionsMatched;
     /**
      * The specific route properties that were matched in the current route, including any ancestors.
      * Order of routes will be from greatest ancestor to narrowest matched.
      */
-    matches: CreateRouteOptionsWithMeta[];
+    matches: CreateRouteOptionsMatched[];
     /**
      * Unique identifier for the route, generated by joining route `name` by period. Key is used for routing and for matching.
      */
@@ -682,11 +689,15 @@ export declare type Route<TKey extends string = string, THost extends Host = Hos
      * Represents the structured query of the route, including query params.
      */
     query: TQuery;
-    depth: number;
     /**
-     * Indicates if the route is disabled.
+     * Represents additional metadata associated with a route, combined with any parents.
      */
-    disabled: TDisabled;
+    meta: TMeta;
+    /**
+     * Represents the schema of the route state, combined with any parents.
+     */
+    state: TState;
+    depth: number;
 };
 
 declare type RouteGetByKey<TRoutes extends Routes, TKey extends RoutesKey<TRoutes>> = RoutesMap<TRoutes>[TKey];
@@ -758,21 +769,14 @@ declare type RouteHookSuccessResponse = {
     status: 'SUCCESS';
 };
 
-declare type RouteIsNamedAndNotDisabled<T extends Route> = IsRouteDisabled<T> extends true ? never : IsRouteUnnamed<T> extends true ? never : T;
-
 /**
  * Represents additional metadata associated with a route, customizable via declaration merging.
- * @example
- * ```ts
- * declare module '@kitbag/router' {
- *   interface RouteMeta {
- *     pageTitle?: string
- *   }
- * }
- * ```
  */
-export declare interface RouteMeta extends Record<string, unknown> {
-}
+export declare type RouteMeta = Register extends {
+    routeMeta: infer RouteMeta extends Record<string, unknown>;
+} ? RouteMeta : Record<string, unknown>;
+
+declare type RouteParams<TPath extends string | Path | undefined, TQuery extends string | Query | undefined, TParent extends Route | undefined = undefined> = ExtractParamTypes<Identity<CombinePath<ParentPath<TParent>, ToPath<TPath>>['params'] & CombineQuery<ParentQuery<TParent>, ToQuery<TQuery>>['params']>>;
 
 declare type RouteParamsByKey<TRoutes extends Routes, TKey extends string> = ExtractRouteParamTypesWithoutLosingOptional<RouteGetByKey<TRoutes, TKey>>;
 
@@ -900,9 +904,16 @@ export declare type RouterOptions = {
      */
     initialUrl?: string;
     /**
-     * Specifies the history mode for the router, such as 'hash', 'history', or 'abstract'.
+     * Specifies the history mode for the router, such as "browser", "memory", or "hash".
+     *
+     * @default "auto"
      */
     historyMode?: RouterHistoryMode;
+    /**
+     * Base path to be prepended to any URL. Can be used for Vue applications that run in nested folder for domain.
+     * For example having `base` of `/foo` would assume all routes should start with `your.domain.com/foo`.
+     */
+    base?: string;
 } & RouterRejectionComponents;
 
 declare type RouterPush<TRoutes extends Routes = any> = {
@@ -910,11 +921,12 @@ declare type RouterPush<TRoutes extends Routes = any> = {
     (source: Url, options?: RouterPushOptions): Promise<void>;
 };
 
-declare type RouterPushArgs<TRoutes extends Routes, TSource extends RoutesKey<TRoutes>, TParams = RouteParamsByKey<TRoutes, TSource>> = AllPropertiesAreOptional<TParams> extends true ? [params?: TParams, options?: RouterPushOptions] : [params: TParams, options?: RouterPushOptions];
+declare type RouterPushArgs<TRoutes extends Routes, TSource extends RoutesKey<TRoutes>> = AllPropertiesAreOptional<RouteParamsByKey<TRoutes, TSource>> extends true ? [params?: RouteParamsByKey<TRoutes, TSource>, options?: RouterPushOptions<RouteStateByKey<TRoutes, TSource>>] : [params: RouteParamsByKey<TRoutes, TSource>, options?: RouterPushOptions<RouteStateByKey<TRoutes, TSource>>];
 
-declare type RouterPushOptions = {
+declare type RouterPushOptions<TState = unknown> = {
     query?: Record<string, string>;
     replace?: boolean;
+    state?: Partial<TState>;
 };
 
 export declare type RouterReject = (type: RouterRejectionType) => void;
@@ -937,9 +949,12 @@ declare type RouterReplace<TRoutes extends Routes> = {
     (source: Url, options?: RouterReplaceOptions): Promise<void>;
 };
 
-declare type RouterReplaceArgs<TRoutes extends Routes, TSource extends RoutesKey<TRoutes>, TParams = RouteParamsByKey<TRoutes, TSource>> = AllPropertiesAreOptional<TParams> extends true ? [params?: TParams, options?: RouterReplaceOptions] : [params: TParams, options?: RouterReplaceOptions];
+declare type RouterReplaceArgs<TRoutes extends Routes, TSource extends RoutesKey<TRoutes>, TParams = RouteParamsByKey<TRoutes, TSource>> = AllPropertiesAreOptional<TParams> extends true ? [params?: TParams, options?: RouterReplaceOptions<RouteStateByKey<TRoutes, TSource>>] : [params: TParams, options?: RouterReplaceOptions<RouteStateByKey<TRoutes, TSource>>];
 
-declare type RouterReplaceOptions = Omit<RouterPushOptions, 'replace'>;
+declare type RouterReplaceOptions<TState = unknown> = {
+    query?: Record<string, string>;
+    state?: Partial<TState>;
+};
 
 declare type RouterResolve<TRoutes extends Routes> = {
     <TSource extends RoutesKey<TRoutes>>(source: TSource, ...args: RouterResolveArgs<TRoutes, TSource>): string;
@@ -956,6 +971,7 @@ declare type RouterRoute<TRoute extends ResolvedRoute = ResolvedRoute> = Readonl
     key: TRoute['key'];
     matched: TRoute['matched'];
     matches: TRoute['matches'];
+    state: TRoute['state'];
     query: ResolvedRouteQuery;
     params: Writable<TRoute['params']>;
     update: RouteUpdate<TRoute>;
@@ -976,8 +992,16 @@ name?: string | undefined;
     default?: ((props: {
         route: Readonly<{
             key: string;
-            matched: CreateRouteOptionsWithMeta;
-            matches: CreateRouteOptionsWithMeta[];
+            matched: CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithoutComponents | WithComponent | WithComponents) & (WithoutParent | WithParent) & (WithoutState | WithState) & {
+                meta: Record<string, unknown>;
+            };
+            matches: (CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithoutComponents | WithComponent | WithComponents) & (WithoutParent | WithParent) & (WithoutState | WithState) & {
+                meta: Record<string, unknown>;
+            })[];
+            state: {
+                [x: string]: any;
+                [x: number]: any;
+            };
             query: ResolvedRouteQuery;
             params: Writable<    {
             [x: string]: any;
@@ -1003,8 +1027,16 @@ name?: string | undefined;
     default?: ((props: {
         route: Readonly<{
             key: string;
-            matched: CreateRouteOptionsWithMeta;
-            matches: CreateRouteOptionsWithMeta[];
+            matched: CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithoutComponents | WithComponent | WithComponents) & (WithoutParent | WithParent) & (WithoutState | WithState) & {
+                meta: Record<string, unknown>;
+            };
+            matches: (CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithoutComponents | WithComponent | WithComponents) & (WithoutParent | WithParent) & (WithoutState | WithState) & {
+                meta: Record<string, unknown>;
+            })[];
+            state: {
+                [x: string]: any;
+                [x: number]: any;
+            };
             query: ResolvedRouteQuery;
             params: Writable<    {
             [x: string]: any;
@@ -1036,9 +1068,11 @@ export declare type Routes = Readonly<Route[]>;
 declare type RoutesKey<TRoutes extends Routes> = string & keyof RoutesMap<TRoutes>;
 
 declare type RoutesMap<TRoutes extends Routes = []> = {
-    [K in TRoutes[number] as RouteIsNamedAndNotDisabled<K>['key']]: RouteIsNamedAndNotDisabled<K>;
+    [K in TRoutes[number] as AsNamedRoute<K>['key']]: AsNamedRoute<K>;
 };
 
+declare type RouteStateByKey<TRoutes extends Routes, TKey extends string> = ExtractStateParams<RouteGetByKey<TRoutes, TKey>>;
+
 declare type RouteUpdate<TRoute extends ResolvedRoute = ResolvedRoute> = ResolvedRoute extends TRoute ? {
     (key: string, value: unknown, options?: RouterPushOptions): Promise<void>;
     (params: Partial<TRoute['params']>, options?: RouterPushOptions): Promise<void>;
@@ -1163,13 +1197,22 @@ export declare class UseRouteInvalidError extends Error {
  */
 export declare function useRouter(): RegisteredRouter;
 
-declare type WithComponent = Partial<WithSingleComponent | WithComponentRecord>;
+declare type WithComponent<TComponent extends Component = Component, TParams extends Record<string, unknown> = Record<string, unknown>> = {
+    /**
+     * A Vue component, which can be either synchronous or asynchronous components.
+     */
+    component: TComponent;
+    props?: (params: TParams) => TComponent extends Component ? MaybePromise<ComponentProps<TComponent>> : {};
+};
 
-declare type WithComponentRecord = {
+declare type WithComponents<TComponents extends Record<string, Component> = Record<string, Component>, TParams extends Record<string, unknown> = Record<string, unknown>> = {
     /**
      * Multiple components for named views, which can be either synchronous or asynchronous components.
      */
-    components: Record<string, Component>;
+    components: TComponents;
+    props?: {
+        [TKey in keyof TComponents]?: (params: TParams) => TComponents[TKey] extends Component ? MaybePromise<ComponentProps<TComponents[TKey]>> : {};
+    };
 };
 
 export declare function withDefault<TParam extends Param>(param: TParam, defaultValue: ExtractParamType<TParam>): ParamWithDefault<TParam>;
@@ -1186,15 +1229,44 @@ declare type WithHooks = {
     onAfterRouteLeave?: MaybeArray<AfterRouteHook>;
 };
 
+declare type WithHost<THost extends string | Host = string | Host> = {
+    /**
+     * Host part of URL.
+     */
+    host: THost;
+};
+
 declare type WithOptionalProperties<T> = {
     [P in keyof T]-?: undefined extends T[P] ? P : never;
 }[keyof T];
 
-declare type WithSingleComponent = {
+declare type WithoutComponents = {
+    component?: never;
+    components?: never;
+    props?: never;
+};
+
+declare type WithoutHost = {
+    host?: never;
+};
+
+declare type WithoutParent = {
+    parent?: never;
+};
+
+declare type WithoutState = {
+    state?: never;
+};
+
+declare type WithParent<TParent extends Route = Route> = {
+    parent: TParent;
+};
+
+declare type WithState<TState extends Record<string, Param> = Record<string, Param>> = {
     /**
-     * A Vue component, which can be either synchronous or asynchronous components.
+     * Type params for additional data intended to be stored in history state, all keys will be optional unless a default is provided.
      */
-    component: Component;
+    state: TState;
 };
 
 declare type Writable<T> = {
@@ -1204,7 +1276,7 @@ declare type Writable<T> = {
 export { }
 
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface GlobalComponents {
         RouterView: typeof RouterView;
         RouterLink: typeof RouterLink;