The official FormKit/Vue integration. This package is responsible for integrating Vue with FormKit core and other first-party packages.
Creates a new input from schema or a Vue component with the "standard" FormKit features in place such as labels, help text, validation messages, and class support.
createInput(schemaOrComponent: FormKitSchemaNode | FormKitSection | Component, definitionOptions?: Partial<FormKitTypeDefinition>): FormKitTypeDefinition;
schemaOrComponent — The actual schema of the input or the component.definitionOptions optional — Any options in the FormKitTypeDefinition you want to define.defineFormKitConfig(config: DefaultConfigOptions | (() => DefaultConfigOptions)): () => DefaultConfigOptions;
configRegister a callback for when SSR is complete. No-op if not in a server context.
onSSRComplete(app: App<any> | undefined, callback: CallableFunction): void;
app — The Vue application.callback — The callback to be called after SSR is complete.Flush all callbacks registered with onSSRComplete for a given app.
ssrComplete(app: App<any>): void;
app — The Vue application.useConfig(config?: FormKitOptions | ((...args: any[]) => FormKitOptions)): void;
config optionalA composable for creating a new FormKit node.
useInput<Props extends FormKitInputs<Props>, Context extends SetupContext<any, any>>(props: Props, context: Context, options?: FormKitOptions): FormKitNode;
propscontextoptions optionalA library of components available to the schema (in addition to globally registered ones)
interface FormKitComponentLibrary {
[index: string]: Component;
}
Type definition for the FormKit component Vue context.
interface FormKitSetupContext<Props extends FormKitInputs<Props>> {
attrs: any;
emit: FormKitEvents<Props>;
expose(exposed:{
}): void;
props:{
}&Props;
slots: Slots<Props>;
}
interface FormKitSummaryMessage {
id: string;
key: string;
message: string;
type: string;
}
The global instance of the FormKit plugin.
interface FormKitVuePlugin {
clearErrors: (formId: string) => void;
get: (id: string) => FormKitNode | undefined;
reset: (formId: string, resetTo?: unknown) => void;
setErrors: (formId: string, errors: string[] | Record<string, string | string[]>, inputErrors?: string[] | Record<string, string | string[]>) => void;
setLocale: (locale: string) => void;
submit: (formId: string) => void;
}
Configuration for plugins
interface PluginConfigs {
iconLoader: FormKitIconLoader;
iconLoaderUrl: FormKitIconLoaderUrl;
icons: Record<string, string | undefined>;
inputs: FormKitLibrary;
locale: string;
locales: FormKitLocaleRegistry;
messages: Record<string, Partial<FormKitLocale>>;
rules: Record<string, FormKitValidationRule>;
theme: string;
}
The allowed options for defaultConfig.
export type DefaultConfigOptions = FormKitOptions & Partial<PluginConfigs> & Record<string, unknown>;
The TypeScript definition for the FormKit component.
export type FormKitComponent = <Props extends FormKitInputs<Props>>(props: Props & VNodeProps & AllowedComponentProps & ComponentCustomProps, context?: Pick<FormKitSetupContext<Props>, 'attrs' | 'emit' | 'slots'>, setup?: FormKitSetupContext<Props>) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}> & {
__ctx?: FormKitSetupContext<Props>;
};
The types of values that can be rendered by Vue.
export type Renderable = null | string | number | boolean | VirtualNode;
A list of renderable items.
export type RenderableList = Renderable | Renderable[] | (Renderable | Renderable[])[];
A slot function that can be rendered.
export type RenderableSlot = (data?: Record<string, any>, key?: object) => RenderableList;
An object of slots
export type RenderableSlots = Record<string, RenderableSlot>;
The type definition for the FormKit’s slots, this is not intended to be used directly.
export type Slots<Props extends FormKitInputs<Props>> = InputType<Props> extends keyof FormKitInputSlots<Props> ? FormKitInputSlots<Props>[InputType<Props>] : {};
The actual signature of a VNode in Vue.
export type VirtualNode = VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;