nuxt-x-app-formkit
Slide
FormKit-powered slideover panel form with automatic CRUD mode and legacy submit support.
Slide
XFormSlide has the same feature set as XFormModal but renders as a USlideover panel. Supports the same CRUD props, success behaviors, and exposed methods.
Components
<XFormSlide />
<XFormSlide
v-model="slide"
endpoint="/api/profile"
:record-id="user.id"
side="right"
size="lg"
on-success="refresh"
>
<FormKit type="text" name="displayName" label="Display Name" validation="required" />
<FormKit type="textarea" name="bio" label="Bio" />
</XFormSlide>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Controls slideover open state (v-model) |
title | string | "" | Panel header title. Auto-derived from endpoint when omitted |
side | "left" | "right" | "right" | Which edge the panel slides from |
size | "sm" | "md" | "lg" | "xl" | "md" | Panel width (sm=320px, md=400px, lg=500px, xl=600px) |
loading | boolean | false | External loading state |
disabled | boolean | false | Disable the submit button |
submitText | string | "Save" | Submit button label |
cancelText | string | "Cancel" | Cancel button label |
confirmClose | boolean | false | Suppress auto-close; handle @close yourself |
endpoint | string | — | API base path. Enables CRUD mode |
recordId | string | number | — | ID of the record to fetch and edit |
initialData | Record<string, any> | — | Pre-populate form without fetching from API |
method | "POST" | "PUT" | "PATCH" | auto | HTTP method override |
idKey | string | "id" | Key used to detect and append record ID |
headers | Record<string,string> | () => Record<string,string> | — | Extra request headers |
transform | (data) => data | — | Transform form data before sending |
showToast | boolean | true | Show success/error toasts |
closeOnSuccess | boolean | true | Close panel after successful API call |
resetOnClose | boolean | true | Clear form data when the panel closes |
formId | string | auto | Override the generated FormKit form node ID |
onSuccess | "refresh" | "navigate" | Function | — | Post-success action |
navigateTo | string | — | Route template for onSuccess: "navigate" |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | boolean | v-model sync |
submit | — | Fired in legacy mode |
close | — | Fired when closed |
success | (data, response) | Fired after successful API call |
error | (error) | Fired on API error |
loaded | (data) | Fired after record fetch |
Slots
| Slot | Scope | Description |
|---|---|---|
| default | { data, isEdit } (CRUD mode only) | Form fields or arbitrary content |
header | — | Panel header content (defaults to the computed title) |
loading | — | Shown while a record is being fetched by recordId |
error | { error, retry } | Shown when the record fetch fails |
footer | { loading, disabled } | Footer actions (defaults to Submit + Cancel) |
2026-07 fix (v0.2.1):
unplugin-formkit previously injected its provider inside the single-root USlideover, hijacking the internal #content slot so the panel rendered an empty shell and named slots were silently lost. The overlay is now wrapped in a plain div. If your slideover renders empty, update to >=0.2.1 — no markup change needed.Exposed Methods
| Method | Description |
|---|---|
open(data?) | Open the panel, optionally pre-populate |
close() | Close the panel |
reset() | Re-initialize form data |
submit() | Programmatically trigger submission |
AI Context
component: XFormSlide
package: "@xenterprises/nuxt-x-app-formkit"
crud-mode: pass endpoint prop; component handles fetch/submit/toast/close automatically
legacy-mode: omit endpoint; handle @submit event yourself
success-behaviors: onSuccess="refresh" | "navigate" | custom function
form-engine: FormKit (validation, node.submit(), node.setErrors())
ui-primitive: USlideover (Nuxt UI)
use-when: Slideover panel forms for creating or editing a resource via API