nuxt-x-app-formkit
FormKit-powered form containers for Nuxt — modal, slideover, and drag-and-drop file upload with automatic CRUD mode.
nuxt-x-app-formkit
FormKit-powered form containers for Nuxt 4. Provides three auto-imported XForm-prefixed components — a modal form, a slideover panel form, and a drag-and-drop file upload zone.
All form containers support two modes:
- CRUD mode — pass an
endpointprop and the component handles fetch, submit, validation, toast notifications, and close automatically - Legacy mode — omit
endpointand handle submission yourself via the@submitevent
Installation
npm install @xenterprises/nuxt-x-app-formkit
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@xenterprises/nuxt-x-app-formkit']
})
Components
| Component | Description |
|---|---|
XFormModal | FormKit form in a UModal overlay |
XFormSlide | FormKit form in a USlideover panel |
XFormFileUpload | Drag-and-drop file picker with validation |
Quick Example
<template>
<UButton @click="open = true">New User</UButton>
<XFormModal
v-model="open"
endpoint="/api/users"
on-success="refresh"
>
<FormKitText name="name" label="Name" validation="required" />
<FormKitText name="email" label="Email" validation="required|email" />
</XFormModal>
</template>
<script setup>
const open = ref(false)
</script>
Prerequisites
- Nuxt 4
@xenterprises/nuxt-x-app(provides Nuxt UI)@xenterprises/nuxt-x-formkit(provides FormKit configuration)
AI Context
package: "@xenterprises/nuxt-x-app-formkit"
prefix: XForm
components: [XFormModal, XFormSlide, XFormFileUpload]
crud-mode: pass endpoint prop — component handles fetch/submit/toast/close
legacy-mode: omit endpoint — handle @submit yourself
use-when: Building forms that create or edit resources via API, with modal or slideover UX