feat: make FormRelay component feature-complete for Vue and Nuxt#11
Merged
RobertBoes merged 9 commits intomainfrom Apr 3, 2026
Merged
feat: make FormRelay component feature-complete for Vue and Nuxt#11RobertBoes merged 9 commits intomainfrom
RobertBoes merged 9 commits intomainfrom
Conversation
When publicKey is omitted, schema fetch is skipped. The composable provides empty reactive state for manual form building. Submit is a no-op without a schema.
publicKey is now optional. initialSchema skips the schema fetch. botProtectionContainer enables auto bot protection widget mounting.
The Nuxt FormRelay component now wraps the Nuxt useFormRelay composable, providing SSR schema prefetch, auto publicKey from runtime config, and secret key support. Only formId is required as a prop. Supports #loading, #error, and #default slots.
The conditional check evaluated at setup time, when the template ref is still null (the element lives inside the slot which hasn't rendered yet). This caused the composable to skip setting up the watcher entirely. Always passing the toRef ensures the watcher picks up the ref when it populates after the slot renders.
- Remove client! non-null assertions by adding explicit !client guard to submit() and fetchSchema() - Guard Nuxt composable's useAsyncData call when no publicKey exists (consistent with Vue composable behavior) - Extract shared renderFormRelay() helper to deduplicate render logic between Vue and Nuxt components
- Change Nuxt module publicKey default from "" to undefined so the if (publicKey) guard works correctly for unconfigured projects - Add PropType annotations to Vue and Nuxt component props for proper template-level type safety, removing the as UseFormRelayOptions cast - Remove dead if (!client) guard inside fetchSchema (unreachable since fetchSchema is only called when publicKey is present) - Add comment to Nuxt component explaining why initialSchema is omitted - Add test: initialSchema without publicKey (display-only rendering) - Add test: botProtectionContainer prop forwarding
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
publicKeyoptional onuseFormRelaycomposable and<FormRelay>component — when omitted, schema fetch is skipped for manual form buildinginitialSchemaandbotProtectionContaineras optional props on the Vue<FormRelay>component, matching features already available on the composable<FormRelay>re-export with an async component wrapping the NuxtuseFormRelaycomposable, providing SSR schema prefetch, automaticpublicKeyfrom runtime config, and secret key supportNuxt
<FormRelay>usageOnly
formIdis required —publicKeycomes from runtime config automatically.Test plan