packages/docs/src/routes/api/qwik-city/index.mdx
export type Action<
RETURN,
INPUT = Record<string, unknown>,
OPTIONAL extends boolean = true,
> = {
(): ActionStore<RETURN, INPUT, OPTIONAL>;
};
References: ActionStore
<h2 id="actionconstructor">ActionConstructor</h2>export type ActionConstructor = {
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: GetValidatorOutputType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: [VALIDATOR, ...REST];
},
): Action<
StrictUnion<
| OBJ
| FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
| FailReturn<FailOfRest<REST>>
>,
GetValidatorInputType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
>(
actionQrl: (
data: GetValidatorOutputType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: [VALIDATOR];
},
): Action<
StrictUnion<
OBJ | FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
>,
GetValidatorInputType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: REST;
},
): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: GetValidatorOutputType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: VALIDATOR,
...rest: REST
): Action<
StrictUnion<
| OBJ
| FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
| FailReturn<FailOfRest<REST>>
>,
GetValidatorInputType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
>(
actionQrl: (
data: GetValidatorOutputType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: VALIDATOR,
): Action<
StrictUnion<
OBJ | FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
>,
GetValidatorInputType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
form: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
...rest: REST
): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;
<OBJ>(
actionQrl: (
form: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options?: {
readonly id?: string;
},
): Action<StrictUnion<OBJ>>;
};
References: TypedDataValidator, DataValidator, GetValidatorOutputType, Action, StrictUnion, FailReturn, ValidatorErrorType, GetValidatorInputType, FailOfRest, JSONObject
<h2 id="actionreturn">ActionReturn</h2>export type ActionReturn<RETURN> = {
readonly status?: number;
readonly value: RETURN;
};
export type ActionStore<RETURN, INPUT, OPTIONAL extends boolean = true> = {
readonly actionPath: string;
readonly isRunning: boolean;
readonly status?: number;
readonly formData: FormData | undefined;
readonly value: RETURN | undefined;
readonly submit: QRL<
OPTIONAL extends true
? (form?: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>
: (form: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>
>;
readonly submitted: boolean;
};
References: ActionReturn
<h2 id="contentheading">ContentHeading</h2>export interface ContentHeading
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
string
</td><td> </td></tr> <tr><td> </td><td>readonly
number
</td><td> </td></tr> <tr><td> </td><td>readonly
string
</td><td> </td></tr> </tbody></table> <h2 id="contentmenu">ContentMenu</h2>export interface ContentMenu
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
(Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td> </td></tr> </tbody></table> <h2 id="datavalidator">DataValidator</h2>export type DataValidator<T extends Record<string, any> = {}> = {
validate(ev: RequestEvent, data: unknown): Promise<ValidatorReturn<T>>;
};
References: ValidatorReturn
<h2 id="documenthead">DocumentHead</h2>export type DocumentHead =
| DocumentHeadValue
| ((props: DocumentHeadProps) => DocumentHeadValue);
References: DocumentHeadValue, DocumentHeadProps
<h2 id="documentheadprops">DocumentHeadProps</h2>export interface DocumentHeadProps extends RouteLocation
Extends: RouteLocation
<table><thead><tr><th>Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
readonly
ResolveSyncValue
</td><td> </td></tr> <tr><td> </td><td>readonly
<T>(fn: () => T) => T
</td><td> </td></tr> </tbody></table> <h2 id="documentheadvalue">DocumentHeadValue</h2>export interface DocumentHeadValue<FrontMatter extends Record<string, any> = Record<string, unknown>>
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
Readonly<FrontMatter>
</td><td>(Optional) Arbitrary object containing custom data. When the document head is created from markdown files, the frontmatter attributes that are not recognized as a well-known meta names (such as title, description, author, etc...), are stored in this property.
</td></tr> <tr><td> </td><td>readonly
readonly DocumentLink[]
</td><td>(Optional) Used to manually append <link> elements to the <head>.
readonly
readonly DocumentMeta[]
</td><td>(Optional) Used to manually set meta tags in the head. Additionally, the data property could be used to set arbitrary data which the <head> component could later use to generate <meta> tags.
readonly
readonly DocumentScript[]
</td><td>(Optional) Used to manually append <script> elements to the <head>.
readonly
readonly DocumentStyle[]
</td><td>(Optional) Used to manually append <style> elements to the <head>.
readonly
string
</td><td>(Optional) Sets document.title.
export interface DocumentLink
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>boolean
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>string
</td><td>(Optional)
</td></tr> </tbody></table> <h2 id="documentmeta">DocumentMeta</h2>export interface DocumentMeta
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> </tbody></table> <h2 id="documentscript">DocumentScript</h2>This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
export interface DocumentScript
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
string
</td><td>(ALPHA) (Optional)
</td></tr> <tr><td> </td><td>readonly
Readonly<QwikIntrinsicElements['script']>
</td><td>(ALPHA) (Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td>(ALPHA) (Optional)
</td></tr> </tbody></table> <h2 id="documentstyle">DocumentStyle</h2>export interface DocumentStyle
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
Readonly<QwikIntrinsicElements['style']>
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
string
</td><td> </td></tr> </tbody></table> <h2 id="errorboundary">ErrorBoundary</h2>ErrorBoundary: import("@builder.io/qwik").Component<ErrorBoundaryProps>;
export type FailOfRest<REST extends readonly DataValidator[]> =
REST extends readonly DataValidator<infer ERROR>[] ? ERROR : never;
References: DataValidator
<h2 id="failreturn">FailReturn</h2>export type FailReturn<T> = T & Failed;
Form: <O, I>(
{ action, spaReset, reloadDocument, onSubmit$, ...rest }: FormProps<O, I>,
key: string | null,
) => import("@builder.io/qwik").JSXOutput;
Parameter
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td>{ action, spaReset, reloadDocument, onSubmit$, ...rest }
</td><td>FormProps<O, I>
</td><td> </td></tr> <tr><td>key
</td><td>string | null
</td><td> </td></tr> </tbody></table>Returns:
import("@builder.io/qwik").JSXOutput
<h2 id="formprops">FormProps</h2>export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
Extends: Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
<table><thead><tr><th>Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td>ActionStore<O, I, true | false>
</td><td>(Optional) Reference to the action returned by action().
string | number | null
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>QRLEventHandlerMulti<SubmitEvent, HTMLFormElement> | undefined
</td><td>(Optional) Event handler executed right when the form is submitted.
</td></tr> <tr><td> </td><td> </td><td>QRLEventHandlerMulti<CustomEvent<FormSubmitCompletedDetail<O>>, HTMLFormElement> | undefined
</td><td>(Optional) Event handler executed right after the action is executed successfully and returns some data.
</td></tr> <tr><td> </td><td> </td><td>boolean
</td><td>(Optional) When true the form submission will cause a full page reload, even if SPA mode is enabled and JS is available.
boolean
</td><td>(Optional) When true all the form inputs will be reset in SPA mode, just like happens in a full page form submission.
Defaults to false
export interface FormSubmitCompletedDetail<T>
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td>number
</td><td> </td></tr> <tr><td> </td><td> </td><td>T
</td><td> </td></tr> </tbody></table> <h2 id="getvalidatorinputtype">GetValidatorInputType</h2>export type GetValidatorInputType<VALIDATOR extends TypedDataValidator> =
VALIDATOR extends ValibotDataValidator<infer TYPE>
? v.InferInput<TYPE>
: VALIDATOR extends ZodDataValidator<infer TYPE>
? z.input<TYPE>
: never;
References: TypedDataValidator
<h2 id="getvalidatoroutputtype">GetValidatorOutputType</h2>export type GetValidatorOutputType<VALIDATOR extends TypedDataValidator> =
VALIDATOR extends ValibotDataValidator<infer TYPE>
? v.InferOutput<TYPE>
: VALIDATOR extends ZodDataValidator<infer TYPE>
? z.output<TYPE>
: never;
References: TypedDataValidator
<h2 id="getvalidatortype">GetValidatorType</h2>export type GetValidatorType<VALIDATOR extends TypedDataValidator> =
GetValidatorOutputType<VALIDATOR>;
References: TypedDataValidator, GetValidatorOutputType
<h2 id="globalaction_">globalAction$</h2>globalAction$: ActionConstructor;
globalActionQrl: ActionConstructorQRL;
export type JSONObject = {
[x: string]: JSONValue;
};
References: JSONValue
<h2 id="jsonvalue">JSONValue</h2>export type JSONValue =
| string
| number
| boolean
| {
[x: string]: JSONValue;
}
| Array<JSONValue>;
References: JSONValue
<h2 id="link">Link</h2>Link: import("@builder.io/qwik").Component<LinkProps>;
export interface LinkProps extends AnchorAttributes
Extends: AnchorAttributes
<table><thead><tr><th>Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td>boolean | 'js'
</td><td>(Optional) **Defaults to _true_.**
Whether Qwik should prefetch and cache the target page of this **Link**, this includes invoking any **routeLoader$**, **onGet**, etc.
This **improves UX performance** for client-side (**SPA**) navigations.
Prefetching occurs when a the Link enters the viewport in production (**on:qvisible**), or with **mouseover/focus** during dev.
Prefetching will not occur if the user has the **data saver** setting enabled.
Setting this value to **"js"** will prefetch only javascript bundles required to render this page on the client, **false** will disable prefetching altogether.
boolean
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>boolean
</td><td>(Optional)
</td></tr> <tr><td> </td><td> </td><td>boolean
</td><td>(Optional)
</td></tr> </tbody></table> <h2 id="loader_2">Loader_2</h2>export type Loader<RETURN> = {
(): LoaderSignal<RETURN>;
};
References: LoaderSignal
<h2 id="loadersignal">LoaderSignal</h2>export type LoaderSignal<TYPE> = TYPE extends () => ValueOrPromise<
infer VALIDATOR
>
? ReadonlySignal<ValueOrPromise<VALIDATOR>>
: ReadonlySignal<TYPE>;
export type MenuData = [pathname: string, menuLoader: MenuModuleLoader];
export type NavigationType = "initial" | "form" | "link" | "popstate";
export interface PageModule extends RouteModule
Extends: RouteModule
<table><thead><tr><th>Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
unknown
</td><td> </td></tr> <tr><td> </td><td>readonly
ContentModuleHead
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
(Optional)
</td></tr> <tr><td> </td><td>readonly
(Optional)
</td></tr> </tbody></table> <h2 id="pathparams">PathParams</h2>export declare type PathParams = Record<string, string>;
export type PreventNavigateCallback = (
url?: number | URL,
) => ValueOrPromise<boolean>;
QWIK_CITY_SCROLLER = "_qCityScroller";
export interface QwikCityMockActionProp<T = any>
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td>Action<T>
</td><td>The action function to mock.
</td></tr> <tr><td> </td><td> </td><td>QRL<(data: T) => ValueOrPromise<RouteActionResolver>>
</td><td>The QRL function that will be called when the action is submitted.
</td></tr> </tbody></table> <h2 id="qwikcitymockloaderprop">QwikCityMockLoaderProp</h2>export interface QwikCityMockLoaderProp<T = any>
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td>T
</td><td>The data to return when the loader is called.
</td></tr> <tr><td> </td><td> </td><td>Loader<T>
</td><td>The loader function to mock.
</td></tr> </tbody></table> <h2 id="qwikcitymockprops">QwikCityMockProps</h2>export interface QwikCityMockProps
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td>Array<QwikCityMockActionProp<any>>
</td><td>(Optional) Allow mocking actions defined with routeAction$ function.
[
{
action: useAddUser,
handler: $(async (data) => {
console.log('useAddUser action called with data:', data);
}),
},
];
(Optional) Allow mocking the goto function returned by useNavigate hook.
Array<QwikCityMockLoaderProp<any>>
</td><td>(Optional) Allow mocking data for loaders defined with routeLoader$ function.
[
{
loader: useProductData,
data: { product: { name: 'Test Product' } },
},
];
Record<string, string>
</td><td>(Optional) Allow mocking the route params returned by useLocation hook.
string
</td><td>(Optional) Allow mocking the url returned by useLocation hook.
Default: http://localhost/
QwikCityMockProvider: import("@builder.io/qwik").Component<QwikCityMockProps>;
export interface QwikCityPlan
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
string
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
boolean
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
MenuData[]
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
readonly
RouteModule[]
</td><td>(Optional)
</td></tr> <tr><td> </td><td>readonly
boolean
</td><td>(Optional)
</td></tr> </tbody></table> <h2 id="qwikcityprops">QwikCityProps</h2>export interface QwikCityProps
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td>boolean
</td><td>(Optional) Enable the ViewTransition API
Default: true
QwikCityProvider: import("@builder.io/qwik").Component<QwikCityProps>;
export type ResolvedDocumentHead<
FrontMatter extends Record<string, any> = Record<string, unknown>,
> = Required<DocumentHeadValue<FrontMatter>>;
References: DocumentHeadValue
<h2 id="routeaction_">routeAction$</h2>routeAction$: ActionConstructor;
routeActionQrl: ActionConstructorQRL;
export type RouteData =
| [routeName: string, loaders: ModuleLoader[]]
| [
routeName: string,
loaders: ModuleLoader[],
originalPathname: string,
routeBundleNames: string[],
];
routeLoader$: LoaderConstructor;
routeLoaderQrl: LoaderConstructorQRL;
export interface RouteLocation
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td>readonly
boolean
</td><td> </td></tr> <tr><td> </td><td>readonly
Readonly<Record<string, string>>
</td><td> </td></tr> <tr><td> </td><td>readonly
URL | undefined
</td><td> </td></tr> <tr><td> </td><td>readonly
URL
</td><td> </td></tr> </tbody></table> <h2 id="routenavigate">RouteNavigate</h2>export type RouteNavigate = QRL<
(
path?: string | number | URL,
options?:
| {
type?: Exclude<NavigationType, "initial">;
forceReload?: boolean;
replaceState?: boolean;
scroll?: boolean;
}
| boolean,
) => Promise<void>
>;
References: NavigationType
<h2 id="routeroutlet">RouterOutlet</h2>RouterOutlet: import("@builder.io/qwik").Component<unknown>;
server$: <T extends ServerFunction>(
qrl: T,
options?: ServerConfig | undefined,
) => ServerQRL<T>;
Parameter
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td>qrl
</td><td>T
</td><td> </td></tr> <tr><td>options
</td><td>ServerConfig | undefined
</td><td>(Optional)
</td></tr> </tbody></table>Returns:
ServerQRL<T>
<h2 id="serverfunction">ServerFunction</h2>export type ServerFunction = {
(this: RequestEventBase, ...args: any[]): any;
options?: ServerConfig;
};
You can pass an AbortSignal as the first argument of a server$ function and it will use it to abort the fetch when fired.
export type ServerQRL<T extends ServerFunction> = QRL<
| ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
| ((...args: Parameters<T>) => ReturnType<T>)
>;
References: ServerFunction
<h2 id="serverqrl-type-alias">ServerQRL</h2>You can pass an AbortSignal as the first argument of a server$ function and it will use it to abort the fetch when fired.
export type ServerQRL<T extends ServerFunction> = QRL<
| ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
| ((...args: Parameters<T>) => ReturnType<T>)
>;
References: ServerFunction
<h2 id="serviceworkerregister">ServiceWorkerRegister</h2>Loads the service workers that are defined in the routes. Any file named service-worker.* (all JS extensions are allowed) will be picked up, bundled into a separate file, and registered as a service worker.
Qwik 1.14.0 and above now use <link rel="modulepreload"> by default. If you didn't add custom service-worker logic, you should remove your service-worker.ts file(s) for the ServiceWorkerRegister Component to actually unregister the service-worker.js and delete its related cache. Make sure to keep the ServiceWorkerRegister Component in your app (without any service-worker.ts file) as long as you want to unregister the service-worker.js for your users.
ServiceWorkerRegister: (props: { nonce?: string }) => JSXOutput;
Parameter
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td>props
</td><td>{ nonce?: string; }
</td><td> </td></tr> </tbody></table>Returns:
JSXOutput
<h2 id="staticgenerate">StaticGenerate</h2>export interface StaticGenerate
Property
</th><th>Modifiers
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td> </td><td> </td><td> </td><td>(Optional)
</td></tr> </tbody></table> <h2 id="staticgeneratehandler">StaticGenerateHandler</h2>export type StaticGenerateHandler = ({
env,
}: {
env: EnvGetter;
}) => Promise<StaticGenerate> | StaticGenerate;
References: StaticGenerate
<h2 id="strictunion">StrictUnion</h2>export type StrictUnion<T> = Prettify<StrictUnionHelper<T, T>>;
export type TypedDataValidator = ValibotDataValidator | ZodDataValidator;
useContent: () => import("./types").ContentState;
Returns:
import("./types").ContentState
<h2 id="usedocumenthead">useDocumentHead</h2>Returns the document head for the current page. The generic type describes the front matter.
useDocumentHead: <
FrontMatter extends Record<string, unknown> = Record<string, any>,
>() => Required<ResolvedDocumentHead<FrontMatter>>;
Returns:
Required<ResolvedDocumentHead<FrontMatter>>
<h2 id="uselocation">useLocation</h2>useLocation: () => RouteLocation;
Returns:
<h2 id="usenavigate">useNavigate</h2>useNavigate: () => RouteNavigate;
Returns:
<h2 id="usepreventnavigate_">usePreventNavigate$</h2>Prevent navigation attempts. This hook registers a callback that will be called before SPA or browser navigation.
Return true to prevent navigation.
#### SPA Navigation
For Single-Page-App (SPA) navigation (via <Link />, const nav = useNavigate(), and browser backwards/forwards inside SPA history), the callback will be provided with the target, either a URL or a number. It will only be a number if nav(number) was called to navigate forwards or backwards in SPA history.
If you return a Promise, the navigation will be blocked until the promise resolves.
This can be used to show a nice dialog to the user, and wait for the user to confirm, or to record the url, prevent the navigation, and navigate there later via nav(url).
#### Browser Navigation
However, when the user navigates away by clicking on a regular <a />, reloading, or moving backwards/forwards outside SPA history, this callback will not be awaited. This is because the browser does not provide a way to asynchronously prevent these navigations.
In this case, returning returning true will tell the browser to show a confirmation dialog, which cannot be customized. You are also not able to show your own window.confirm() dialog during the callback, the browser won't allow it. If you return a Promise, it will be considered as true.
When the callback is called from the browser, no url will be provided. Use this to know whether you can show a dialog or just return true to prevent the navigation.
usePreventNavigate$: (qrl: PreventNavigateCallback) => void
Parameter
</th><th>Type
</th><th>Description
</th></tr></thead> <tbody><tr><td>qrl
</td><td> </td><td> </td></tr> </tbody></table>Returns:
void
<h2 id="valibot_">valibot$</h2>This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
valibot$: ValibotConstructor;
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
valibotQrl: ValibotConstructorQRL;
validator$: ValidatorConstructor;
export type ValidatorErrorKeyDotNotation<T, Prefix extends string = ""> =
IsAny<T> extends true
? never
: T extends object
? {
[K in keyof T & string]: IsAny<T[K]> extends true
? never
: T[K] extends (infer U)[]
? IsAny<U> extends true
? never
: U extends object
?
| `${Prefix}${K}[]`
| ValidatorErrorKeyDotNotation<U, `${Prefix}${K}[].`>
: `${Prefix}${K}[]`
: T[K] extends object
? ValidatorErrorKeyDotNotation<T[K], `${Prefix}${K}.`>
: `${Prefix}${K}`;
}[keyof T & string]
: never;
References: ValidatorErrorKeyDotNotation
<h2 id="validatorerrortype">ValidatorErrorType</h2>export type ValidatorErrorType<T, U = string> = {
formErrors: U[];
fieldErrors: Partial<{
[K in ValidatorErrorKeyDotNotation<T>]: K extends `${infer _Prefix}[]${infer _Suffix}`
? U[]
: U;
}>;
};
References: ValidatorErrorKeyDotNotation
<h2 id="validatorqrl">validatorQrl</h2>validatorQrl: ValidatorConstructorQRL;
export type ValidatorReturn<T extends Record<string, any> = {}> =
| ValidatorReturnSuccess
| ValidatorReturnFail<T>;
zod$: ZodConstructor;
export type ZodConstructor = {
<T extends z.ZodRawShape>(schema: T): ZodDataValidator<z.ZodObject<T>>;
<T extends z.ZodRawShape>(
schema: (zod: typeof z.z, ev: RequestEvent) => T,
): ZodDataValidator<z.ZodObject<T>>;
<T extends z.Schema>(schema: T): ZodDataValidator<T>;
<T extends z.Schema>(
schema: (zod: typeof z.z, ev: RequestEvent) => T,
): ZodDataValidator<T>;
};
zodQrl: ZodConstructorQRL;