Skip to content

feat: make FormRelay component feature-complete for Vue and Nuxt#11

Merged
RobertBoes merged 9 commits intomainfrom
feature/nuxt-formrelay-component
Apr 3, 2026
Merged

feat: make FormRelay component feature-complete for Vue and Nuxt#11
RobertBoes merged 9 commits intomainfrom
feature/nuxt-formrelay-component

Conversation

@RobertBoes
Copy link
Copy Markdown
Contributor

@RobertBoes RobertBoes commented Apr 3, 2026

Summary

  • Make publicKey optional on useFormRelay composable and <FormRelay> component — when omitted, schema fetch is skipped for manual form building
  • Add initialSchema and botProtectionContainer as optional props on the Vue <FormRelay> component, matching features already available on the composable
  • Replace the Nuxt <FormRelay> re-export with an async component wrapping the Nuxt useFormRelay composable, providing SSR schema prefetch, automatic publicKey from runtime config, and secret key support

Nuxt <FormRelay> usage

<FormRelay form-id="contact">
  <template #loading>
    <p>Loading form...</p>
  </template>
  <template #error="{ error }">
    <p>Failed to load: {{ error.detail }}</p>
  </template>
  <template #default="{ fields, values, errors, submit, canSubmit }">
    <!-- form fields + submit button -->
  </template>
</FormRelay>

Only formId is required — publicKey comes from runtime config automatically.

Test plan

  • Composable skips schema fetch when publicKey is omitted
  • Submit is a no-op without a schema
  • Component accepts initialSchema prop and skips fetch
  • Component renders immediately when publicKey is omitted
  • All 57 existing + new tests pass
  • Build succeeds for all packages
  • Manual testing: link local packages into a real world Nuxt app

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
@RobertBoes RobertBoes merged commit 380b9be into main Apr 3, 2026
1 check failed
@RobertBoes RobertBoes deleted the feature/nuxt-formrelay-component branch April 3, 2026 10:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant