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.Register 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.A composable for creating a new FormKit node.
useInput(props: FormKitComponentProps, context: SetupContext<any>, options?: FormKitOptions): FormKitNode;propscontextoptions optionalA library of components available to the schema (in addition to globally registered ones)
interface FormKitComponentLibrary {
[index: string]: Component;
}FormKit props of a component
interface FormKitComponentProps {
classes?: Record<string, string | Record<string, boolean> | FormKitClasses>;
config: Record<string, any>;
dynamic?: boolean;
errors: string[];
index?: number;
inputErrors: Record<string, string | string[]>;
modelValue?: any;
name?: string;
parent?: FormKitNode;
plugins: FormKitPlugin[];
sync?: boolean;
type?: string | FormKitTypeDefinition;
validation?: any;
}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;
locales: FormKitLocaleRegistry;
messages: Record<string, Partial<FormKitLocale>>;
rules: Record<string, FormKitValidationRule>;
theme: string;
}The allowed options for defaultConfig.
type DefaultConfigOptions = FormKitOptions & Partial<PluginConfigs> & Record<string, unknown>;The types of values that can be rendered by Vue.
type Renderable = null | string | number | boolean | VirtualNode;A list of renderable items.
type RenderableList = Renderable | Renderable[] | (Renderable | Renderable[])[];A slot function that can be rendered.
type RenderableSlot = (data?: Record<string, any>, key?: object) => RenderableList;An object of slots
type RenderableSlots = Record<string, RenderableSlot>;The actual signature of a VNode in Vue.
type VirtualNode = VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;