VDF

vuetify-dynamic-fields

Generate Vue 3 + Vuetify form fields dynamically from a JSON schema — fast, consistent, and extensible.

View on npm View on GitHub

Quick install

Peer dependencies: vue (≥3), vuetify (≥3), @vuelidate/core, @vuelidate/validators

npm install vuetify-dynamic-fields
npm install vue vuetify @vuelidate/core @vuelidate/validators

Quick usage

// app setup
import { createApp } from 'vue'
import App from './App.vue'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import DynamicFieldsPlugin from 'vuetify-dynamic-fields'

const app = createApp(App)
app.use(createVuetify())
app.use(DynamicFieldsPlugin)
app.mount('#app')

Live example

Run the included example locally.

Open local example

cd example
npm install
npm run dev

Available options (field schema)

The plugin exposes a global component <DynamicFieldsGenerator />. Each field is defined using the following properties:

name — unique key (required)
type — string, text, email, url, integer, number
label — displayed label
default — default value
required — boolean
min / max — numeric range

minLength / maxLength — text limits
pattern — regex validation
options — select / radio options
itemTitle / itemValue — option mapping
multiple — multi-select
props — forwarded Vuetify props

Validation & messages

messages — custom validator messages
custom — custom validator function
customMessage — message for custom validator

Example field

{
  name: 'theme',
  type: 'select',
  label: 'Theme',
  required: true,
  options: [
    { id: 'light', name: 'Light' },
    { id: 'dark', name: 'Dark' }
  ],
  itemTitle: 'name',
  itemValue: 'id',
  props: {
    placeholder: 'Select a theme',
    variant: 'outlined',
    density: 'compact'
  },
  messages: {
    required: 'Choose a theme'
  }
}

Component API

validate() → Promise<boolean>
getValues() → object
reset(values?)

Resources

Local example