Form fields reset on submit, and a some other strange behavior
Hi all!
I've used Vue for several years, but I've been working on learning some new libraries to add to my toolbox (Nuxt, NuxtUI, Pinia Colada)...
I noticed some strange behavior when using the NuxtUI Form component with Pinia Colada and I created a simple Todo app to replicate the issues I'm seeing. I'm hoping somebody here can help me out.
https://github.com/partap/nuxtui-forms-test
1. When I submit from a NuxtUI
Form component, the form content is reset to the initial state. All edits are discarded, and the form inputs do not match the source model. This appears to happen after the Submit handler finishes. This means that in the normal flow, between submitting the updates to the server and receiving the updated state from the server response, the changed fields briefly flash to the pre-edited values. If I don't actually post the changes in the submit handler, the form fields just revert and you can see the mismatch from the component data state vs the form field values.
2. The form's dirty prop seems to be false, always. Not sure if this is a bug, or if I need to handle it somehow, but the dirtyFields prop is updated automatically, so that's weird.
3. I can't get the Checkbox component to work inside a form (same with Switch). If I click it, I can see that it updates the boolean v-model value to true, but the UI never updates to show checked. I can use a Switch or Checkbox to set values outside of the form state with no issues, so I assume it's either the Form component or something about the Pinia Colada state that's causing the problem.
It seems that the Form component does a lot of fancy stuff behind the scenes to support validation and error reporting, so maybe I'm just using it wrong, but it seems pretty straightforward to use with a zod schema. I was using zod anyhow, so getting form validation for free would be pretty awesome.GitHub
GitHub - partap/nuxtui-forms-test: Simple project for testing NuxtU...
Simple project for testing NuxtUI Forms behavior. Contribute to partap/nuxtui-forms-test development by creating an account on GitHub.
9 Replies
Hi @partap. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the provided knowledge sources, here’s what can be determined about your issues with NuxtUI Form, Pinia Colada, and related components:
1. Form fields reset on submit
The NuxtUI Form component expects a reactive
state object to manage form data. If you use a store (like Pinia Colada) as the source of truth for your form state, and you mutate or replace this state during or after submission, it can cause the form fields to reset or behave unexpectedly. The documentation and examples show using a local reactive object for form state, not a store. There is no explicit mention in the knowledge sources about integration with Pinia or Pinia Colada, so using a store directly as the form state may lead to issues that are not handled by the Form component’s internal logic.
Additionally, the form does not automatically reset fields on submit unless you explicitly reset the state. If you see a reset, it may be due to how the state is managed or replaced after submission, especially if you’re syncing with a store or server response. The knowledge sources do not provide a direct solution for this, but recommend using a local reactive state for the form and syncing with the store only when needed (e.g., after successful submission) Form usage.
2. dirty prop always false, but dirtyFields updates
The dirty prop is a Ref<boolean> that should be true if at least one form field has been updated by the user, while dirtyFields tracks which fields have been modified. The documentation does not mention any known issues with dirty, but it’s possible that using a store as the form state interferes with the internal tracking of changes, since the Form component expects a local reactive object Expose API. If dirtyFields works but dirty does not, this may be a bug or a limitation when using external state management.
3. Checkbox/Switch not updating UI inside the form
The NuxtUI Checkbox component is designed to work with v-model and a local state variable. If you use a store property as the model, and the store is not reactive in the way Vue expects (or if the form’s internal validation/updates are not compatible with the store’s reactivity), the UI may not update as expected. The documentation shows Checkbox working with a local ref or reactive property Checkbox usage. There is no mention of using store properties directly.
Recommendations
- Use a local reactive object for the form’s state prop, as shown in the documentation. Sync with your store only after successful submission or when loading initial values.
- Avoid using store properties directly as the form state or as v-model targets for form fields.
- If you need to integrate with a store, copy the store’s values into the local form state on mount, and write them back after submission.
- For Checkbox and Switch, use a local state variable for v-model inside the form.
Limitations
The knowledge sources do not explicitly mention Pinia Colada or provide details about using external stores as form state. The issues you’re experiencing are likely due to the mismatch between the expected local reactivity and the store’s reactivity model.
If you need more advanced integration, you may need to manage syncing between the form’s local state and your store manually.
---
If you need code examples or further clarification, please provide more details or refer to the official NuxtUI documentation for the most up-to-date usage patterns.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@514241592459264010> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Actually got a surprisingly good answer from @kapa.ai, although it's pretty disappointing to see that the NuxtUI Form component doesn't work well with stores or refs in general.
Manually converting/syncing state between ref and reactive objects kinda seems to defeat the purpose of using Vue in the first place 🤨
Is there a another Form component that would make a good replacement? Preferably one with automatic validation based on zod schemas.
@kapa.ai Is there another Form component that would make a good replacement? One that works with Pinia Colada state and handles automatic validation based on zod schemas?
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but the knowledge sources do not mention any alternative Form components for Nuxt that are specifically designed to work seamlessly with Pinia Colada state and provide automatic validation based on Zod schemas. The official NuxtUI Form component is documented to support Zod (and other schema libraries), but there is no information about other form libraries or components with better integration for Pinia Colada or similar state management solutions in the provided sources.
If you need to use Zod validation and Pinia Colada together, the recommended approach (according to the documentation) is to use a local
reactive state for the form and manually sync with your store as needed, rather than relying on direct store integration within the form component itself Form usage.
If you need more options, you may need to look outside the provided knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@514241592459264010> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai Ok, I'm syncing the state from Pinia Colada with a local
reactive state variable now using onMounted and watch. The form is no longer resetting and the checkbox is working now.
However, the form's dirty prop is still always reporting false. Any ideas?Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, the
I'm sorry, but the knowledge sources do not contain enough information to explain why the
dirty prop of the NuxtUI Form component should be a Ref<boolean> that becomes true if at least one form field has been updated by the user. However, there is no explicit documentation or troubleshooting guidance regarding scenarios where dirty remains false even though dirtyFields updates as expected.
The documentation does mention that the form tracks dirtyFields, touchedFields, and blurredFields internally, and these are exposed via the component instance when using useTemplateRef Expose API. There is no mention of known issues or special requirements for the dirty prop, nor any caveats about syncing local state with external sources like Pinia Colada.
Given this, if dirtyFields is updating but dirty is not, it may be a bug or an undocumented limitation, especially when the form state is initialized or synced from an external source. The knowledge sources do not provide a solution or workaround for this specific issue.
Summary:I'm sorry, but the knowledge sources do not contain enough information to explain why the
dirty prop remains false while dirtyFields updates, nor do they provide a fix for this behavior. If this is blocking your workflow, you may want to open an issue on the NuxtUI repository or check for updates in the official documentation Expose API.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@514241592459264010> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Worth a shot...I suppose I can always just check
dirtyFields.size