formvuelate

library4.3.0jsnpmunverified

FormVueLate is a zero-dependency, schema-driven form generation library for Vue 3. Version 4.3.0 is the latest stable release, actively maintained with monthly updates. It decouples form logic from UI components by requiring users to bring their own components, making it extremely flexible and compatible with any UI library (e.g., Vuetify, Element Plus, Quasar). The schema can be reactive, modified at runtime, or fetched from an API. Official plugins integrate with Vee-Validate and Vuelidate for validation. Unlike other form generators like FormKit or Vee-Validate, FormVueLate does not bundle any form controls, giving complete control over styling and behavior. It ships as ESM with TypeScript definitions and requires Vue 3.4+ and Node >=20.19.0.

devops

npm install formvuelate

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FORMVUELATE

formvuelate

devopsjavascriptv4.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SchemaForm

✓ import { SchemaForm } from 'formvuelate'

✗ import SchemaForm from 'formvuelate'

Named export, not default. Common mistake: using default import which returns undefined.

useSchemaForm

✓ import { useSchemaForm } from 'formvuelate'

✗ import { useSchemaForm } from 'formvuelate/src'

Export is at package root, not from subpath. Required for initializing form model.

SchemaFormFactory

✓ import { SchemaFormFactory } from 'formvuelate'

Advanced use for custom schema form component wrapping. Not commonly used in basic setups.

Shows minimal setup: install, import SchemaForm and useSchemaForm, define reactive schema with component and modelKey, and bind to formModel via useSchemaForm.

// Install: npm install formvuelate // App.vue <template> <SchemaForm :schema="schema" /> </template> <script setup> import { ref } from 'vue' import { SchemaForm, useSchemaForm } from 'formvuelate' const formModel = ref({}) useSchemaForm(formModel) const schema = ref([ { component: 'input', modelKey: 'email', label: 'Email', type: 'email', placeholder: 'Enter email' }, { component: 'input', modelKey: 'password', label: 'Password', type: 'password' } ]) </script>

Debug

Known issues

breakingv4 requires Vue 3.4+ and Node >=20.19.0. Older versions are not supported.

fix

Upgrade Vue to >=3.4 and Node to >=20.19.0, then install formvuelate@4.

affects: <4.0.0

deprecatedThe old SchemaFormFactory usage with createSchemaForm is removed in v4. Use direct SchemaForm import.

fix

Replace createSchemaForm with import { SchemaForm } from 'formvuelate' and use component directly.

affects: >=4.0.0

gotchaComponents referenced in schema must be globally registered or provided via plugin. Missing registration causes silent render failure.

fix

Import the component and pass it in schema as 'component: MyInput', or register globally with app.component().

affects: >=1.0.0

gotchauseSchemaForm must be called inside a component's setup() or <script setup>. Calling it outside causes 'must be called at the top of a setup function' error.

fix

Ensure useSchemaForm is called within a component setup or <script setup> block.

affects: >=3.0.0

breakingSchema property 'modelKey' is required and must match a key in the form model. Otherwise component emits no updates.

fix

Set modelKey to a unique path (e.g., 'user.email') that corresponds to the form model structure.

affects: >=4.0.0

Errors

Common errors & fixes

Cannot find module 'formvuelate' or its corresponding type declarations.

Package not installed or TypeScript unable to resolve types.

fix

Run 'npm install formvuelate' and ensure tsconfig.json includes 'moduleResolution': 'node' or 'bundler'.

TypeError: formvuelate_esm__WEBPACK_IMPORTED_MODULE_0__.SchemaForm is not a function

Default import used instead of named import for SchemaForm.

fix

Change to: import { SchemaForm } from 'formvuelate'

SchemaForm must be used inside a component with a call to useSchemaForm.

Missing useSchemaForm() call in the component where SchemaForm is used.

fix

Add 'import { useSchemaForm } from 'formvuelate'' and call 'useSchemaForm(formModel)' in setup.

Unknown component: SchemaForm - did you register the component correctly?

SchemaForm not registered in Vue's component options or globally.

fix

Add 'components: { SchemaForm }' (Options API) or ensure component is imported and used in <script setup>.

Upgrade

Version history

4.3.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency. FormVueLate relies on Vue 3 reactivity and component system.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/formvuelate/formvuelate ↗

packageformvuelate ↗

homepagehttps://formvuelate.js.org/ ↗