API › @builder.io/qwik-city

Action

export interface Action<RETURN, INPUT = Record<string, any>, OPTIONAL extends boolean = true>

Edit this section

ActionConstructor

export interface ActionConstructor

Edit this section

ActionOptions

export interface ActionOptions
PropertyModifiersTypeDescription
id?readonlystring(Optional)
validation?readonlyDataValidator[](Optional)

Edit this section

ActionOptionsWithValidation

export interface ActionOptionsWithValidation<B extends TypedDataValidator = TypedDataValidator>
PropertyModifiersTypeDescription
id?readonlystring(Optional)
validationreadonly[val: B, ...a: DataValidator[]]

Edit this section

ActionStore

export interface ActionStore<RETURN, INPUT, OPTIONAL extends boolean = true>
PropertyModifiersTypeDescription
actionPathreadonlystringIt's the "action" path that a native <form> should have in order to call the action.
<form action={action.actionPath} />

export const useAddUser = action$(() => { ... });

export default component$(() => { const action = useAddUser(); return (

 |
|  [formData](#) | <code>readonly</code> | FormData \| undefined | <p>When calling an action through a <code>&lt;form&gt;</code>, this property contains the previously submitted <code>FormData</code>.</p><p>This is useful to keep the filled form data even after a full page reload.</p><p>It's <code>undefined</code> before the action is first called.</p> |
|  [isRunning](#) | <code>readonly</code> | boolean | <p>Reactive property that becomes <code>true</code> only in the browser, when a form is submitted and switched back to false when the action finish, ie, it describes if the action is actively running.</p><p>This property is specially useful to disable the submit button while the action is processing, to prevent multiple submissions, and to inform visually to the user that the action is actively running.</p><p>It will be always <code>false</code> in the server, and only becomes <code>true</code> briefly while the action is running.</p> |
|  [status?](#) | <code>readonly</code> | number | <p>_(Optional)_ Returned HTTP status code of the action after its last execution.</p><p>It's <code>undefined</code> before the action is first called.</p> |
|  [submit](#) | <code>readonly</code> | QRL&lt;OPTIONAL extends true ? (form?: INPUT \| FormData \| SubmitEvent) =&gt; Promise&lt;ActionReturn&lt;RETURN&gt;&gt; : (form: INPUT \| FormData \| SubmitEvent) =&gt; Promise&lt;ActionReturn&lt;RETURN&gt;&gt;&gt; | Method to execute the action programmatically from the browser. Ie, instead of using a <code>&lt;form&gt;</code>, a 'click' handle can call the <code>run()</code> method of the action in order to execute the action in the server. |
|  [value](#) | <code>readonly</code> | RETURN \| undefined | <p>Returned successful data of the action. This reactive property will contain the data returned inside the <code>action$</code> function.</p><p>It's <code>undefined</code> before the action is first called.</p> |

[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts)

## ContentHeading

```typescript
export interface ContentHeading
PropertyModifiersTypeDescription
idreadonlystring
levelreadonlynumber
textreadonlystring

Edit this section

ContentMenu

export interface ContentMenu
PropertyModifiersTypeDescription
href?readonlystring(Optional)
items?readonlyContentMenu[](Optional)
textreadonlystring

Edit this section

DocumentHead

export type DocumentHead =
  | DocumentHeadValue
  | ((props: DocumentHeadProps) => DocumentHeadValue);

References: DocumentHeadValue, DocumentHeadProps

Edit this section

DocumentHeadProps

export interface DocumentHeadProps extends RouteLocation

Extends: RouteLocation

PropertyModifiersTypeDescription
headreadonlyResolvedDocumentHead
resolveValuereadonlyResolveSyncValue
withLocalereadonly<T>(fn: () => T) => T

Edit this section

DocumentHeadValue

export interface DocumentHeadValue
PropertyModifiersTypeDescription
frontmatter?readonlyReadonly<Record<string, any>>(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.
links?readonlyreadonly DocumentLink[](Optional) Used to manually append <link> elements to the <head>.
meta?readonlyreadonly DocumentMeta[](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.
styles?readonlyreadonly DocumentStyle[](Optional) Used to manually append <style> elements to the <head>.
title?readonlystring(Optional) Sets document.title.

Edit this section

export interface DocumentLink
PropertyModifiersTypeDescription
as?string(Optional)
crossorigin?string(Optional)
disabled?boolean(Optional)
href?string(Optional)
hreflang?string(Optional)
id?string(Optional)
imagesizes?string(Optional)
imagesrcset?string(Optional)
integrity?string(Optional)
key?string(Optional)
media?string(Optional)
prefetch?string(Optional)
referrerpolicy?string(Optional)
rel?string(Optional)
sizes?string(Optional)
title?string(Optional)
type?string(Optional)

Edit this section

DocumentMeta

export interface DocumentMeta
PropertyModifiersTypeDescription
content?readonlystring(Optional)
httpEquiv?readonlystring(Optional)
itemprop?readonlystring(Optional)
key?readonlystring(Optional)
media?readonlystring(Optional)
name?readonlystring(Optional)
property?readonlystring(Optional)

Edit this section

DocumentStyle

export interface DocumentStyle
PropertyModifiersTypeDescription
key?readonlystring(Optional)
props?readonlyReadonly<{ [propName: string]: string; }>(Optional)
stylereadonlystring

Edit this section

FailReturn

export type FailReturn<T> = T & {
  failed: true;
};

Edit this section

Form

Form: <O, I>(
  { action, spaReset, reloadDocument, onSubmit$, ...rest }: FormProps<O, I>,
  key: string | null
) => QwikJSX.Element;

Edit this section

FormProps

export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>

Extends: Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>

PropertyModifiersTypeDescription
action?ActionStore<O, I, true | false>(Optional) Reference to the action returned by action().
key?string | number | null(Optional)
onSubmit$?(event: Event, form: HTMLFormElement) => ValueOrPromise<void>(Optional) Event handler executed right when the form is submitted.
onSubmitCompleted$?(event: CustomEvent<FormSubmitCompletedDetail<O>>, form: HTMLFormElement) => ValueOrPromise<void>(Optional) Event handler executed right after the action is executed successfully and returns some data.
reloadDocument?boolean(Optional) When true the form submission will cause a full page reload, even if SPA mode is enabled and JS is available.
spaReset?boolean(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

Edit this section

FormSubmitSuccessDetail

export interface FormSubmitCompletedDetail<T>
PropertyModifiersTypeDescription
statusnumber
valueT

Edit this section

globalAction$

globalAction$: ActionConstructor;

Edit this section

globalActionQrl

globalActionQrl: ActionConstructorQRL;

Edit this section

JSONObject

export type JSONObject = {
  [x: string]: JSONValue;
};

References: JSONValue

Edit this section

JSONValue

export type JSONValue =
  | string
  | number
  | boolean
  | {
      [x: string]: JSONValue;
    }
  | Array<JSONValue>;

References: JSONValue

Edit this section

Link: import("@builder.io/qwik").Component<LinkProps>;

Edit this section

LinkProps

export interface LinkProps extends AnchorAttributes

Extends: AnchorAttributes

PropertyModifiersTypeDescription
prefetch?boolean(Optional)
reload?boolean(Optional)

Edit this section

Loader

export interface Loader<RETURN>

Edit this section

LoaderSignal

export type LoaderSignal<T> = T extends () => ValueOrPromise<infer B>
  ? ReadonlySignal<ValueOrPromise<B>>
  : ReadonlySignal<T>;

Edit this section

export type MenuData = [pathname: string, menuLoader: MenuModuleLoader];

Edit this section

export type NavigationType = "initial" | "form" | "link" | "popstate";

Edit this section

PageModule

export interface PageModule extends RouteModule

Extends: RouteModule

PropertyModifiersTypeDescription
defaultreadonlyany
head?readonlyContentModuleHead(Optional)
headings?readonlyContentHeading[](Optional)
onStaticGenerate?readonlyStaticGenerateHandler(Optional)

Edit this section

PathParams

export declare type PathParams = Record<string, string>;

Edit this section

QwikCityMockProps

export interface QwikCityMockProps
PropertyModifiersTypeDescription
params?Record<string, string>(Optional)
url?string(Optional)

Edit this section

QwikCityMockProvider

QwikCityMockProvider: import("@builder.io/qwik").Component<QwikCityMockProps>;

Edit this section

QwikCityPlan

export interface QwikCityPlan
PropertyModifiersTypeDescription
basePathname?readonlystring(Optional)
cacheModules?readonlyboolean(Optional)
menus?readonlyMenuData[](Optional)
routesreadonlyRouteData[]
serverPlugins?readonlyRouteModule[](Optional)
trailingSlash?readonlyboolean(Optional)

Edit this section

QwikCityProps

export interface QwikCityProps
PropertyModifiersTypeDescription
viewTransition?boolean(Optional) Enable the ViewTransition APIDefault: true

Edit this section

QwikCityProvider

QwikCityProvider: import("@builder.io/qwik").Component<QwikCityProps>;

Edit this section

ResolvedDocumentHead

export type ResolvedDocumentHead = Required<DocumentHeadValue>;

References: DocumentHeadValue

Edit this section

routeAction$

routeAction$: ActionConstructor;

Edit this section

routeActionQrl

routeActionQrl: ActionConstructorQRL;

Edit this section

RouteData

export type RouteData =
  | [pattern: RegExp, loaders: ModuleLoader[]]
  | [pattern: RegExp, loaders: ModuleLoader[], paramNames: string[]]
  | [
      pattern: RegExp,
      loaders: ModuleLoader[],
      paramNames: string[],
      originalPathname: string,
      routeBundleNames: string[]
    ];

Edit this section

routeLoader$

routeLoader$: LoaderConstructor;

Edit this section

routeLoaderQrl

routeLoaderQrl: LoaderConstructorQRL;

Edit this section

RouteLocation

export interface RouteLocation
PropertyModifiersTypeDescription
isNavigatingreadonlyboolean
paramsreadonlyReadonly<Record<string, string>>
prevUrlreadonlyURL | undefined
urlreadonlyURL

Edit this section

RouteNavigate

export type RouteNavigate = QRL<
  (
    path?: string,
    options?:
      | {
          type?: Exclude<NavigationType, "initial">;
          forceReload?: boolean;
          replaceState?: boolean;
        }
      | boolean
  ) => Promise<void>
>;

References: NavigationType

Edit this section

RouterOutlet

RouterOutlet: import("@builder.io/qwik").Component<{}>;

Edit this section

server$

server$: <T extends import("./types").ServerFunction>(first: T) => QRL<T>;

Edit this section

serverQrl

serverQrl: ServerConstructorQRL;

Edit this section

ServiceWorkerRegister

ServiceWorkerRegister: (props: { nonce?: string }) =>
  import("@builder.io/qwik").JSXNode<"script">;

Edit this section

StaticGenerate

export interface StaticGenerate
PropertyModifiersTypeDescription
params?PathParams[](Optional)

Edit this section

StaticGenerateHandler

export type StaticGenerateHandler = () =>
  | Promise<StaticGenerate>
  | StaticGenerate;

References: StaticGenerate

Edit this section

useContent

useContent: () => import("./types").ContentState;

Edit this section

useDocumentHead

useDocumentHead: () => Required<ResolvedDocumentHead>;

Edit this section

useLocation

useLocation: () => RouteLocation;

Edit this section

useNavigate

useNavigate: () => RouteNavigate;

Edit this section

validator$

validator$: ValidatorConstructor;

Edit this section

validatorQrl

validatorQrl: ValidatorConstructorQRL;

Edit this section

zod$

zod$: ZodConstructor;

Edit this section

ZodConstructor

export interface ZodConstructor

Edit this section

zodQrl

zodQrl: ZodConstructorQRL;

Edit this section