Getting Started
Client Installation
Install FormForge Client in Nuxt 4 and render your first form.
Requirements
- Nuxt
4.x @nuxt/ui4.x- Node.js
>=20or Bun>=1.3
Install and register module
Terminal
bun add @evanschleret/formforgeclient
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui', '@evanschleret/formforgeclient'],
formforgeClient: {
baseURL: '/api/formforge/v1',
credentials: 'include',
uploadMode: 'staged',
datetimeMode: 'offset',
locale: 'en',
autoImports: true
}
})
Render a form (renderer mode)
<script setup lang="ts">
const route = useRoute()
</script>
<template>
<FormForgeRenderer
:form-key="String(route.params.form)"
show-progress
show-alert-on-error
@submitted="(response) => console.log(response)"
@error="(message) => console.error(message)"
/>
</template>
Controlled mode quick sample
<script setup lang="ts">
const route = useRoute()
const form = useFormForgeForm({
key: String(route.params.form),
immediate: true
})
const submitter = useFormForgeSubmit({
key: String(route.params.form),
schema: () => form.schema.value,
state: () => form.state.value
})
async function onSubmit(): Promise<void> {
await submitter.submit({ mode: 'staged' })
}
</script>