nuxt-x-app
Forms
Form input components for file uploads, editors, and search.
Forms
Enhanced form components for uploads, rich text editing, and search inputs.
Components
<XAFormSection />
Groups related form fields with a title and optional description.
<XAFormSection title="Profile Information" description="Update your personal details.">
<UFormField label="Name">
<UInput v-model="name" />
</UFormField>
</XAFormSection>
<XAFormSearchInput />
Debounced search input with loading indicator.
<XAFormSearchInput v-model="search" placeholder="Search users..." :loading="searching" />
<XAFormUploadImage />
Drag-and-drop image upload with preview.
<XAFormUploadImage
v-model="imageUrl"
:upload-url="'/api/upload/image'"
accept="image/*"
:max-size-mb="5"
/>
<XAFormUploadFile />
Multi-file upload with progress tracking.
<XAFormUploadFile
v-model="files"
:upload-url="'/api/upload'"
:max-files="10"
accept=".pdf,.doc,.docx"
/>
<XAFormUploadAvatar />
Circular avatar upload with crop preview.
<XAFormEditor />
Rich text editor (Tiptap-based).
<XAFormEditor v-model="content" :toolbar="['bold', 'italic', 'link', 'image']" />
AI Context
category: Forms
package: "@xenterprises/nuxt-x-app"
use-when: Admin forms requiring file uploads, rich text editing, or search inputs
upload-components: [XAFormUploadImage, XAFormUploadFile, XAFormUploadAvatar]
upload-pattern: requires upload-url prop pointing to POST endpoint, emits update:modelValue with URL/URLs
XAFormEditor: rich text, v-model is HTML string
XAFormSearchInput: debounced 300ms by default, v-model is search string