Usage

Generate a form from a schema

SForm takes a JSON Schema and a value to bind with v-model. Use json-schema-library to compile the schema and to build an initial value from its defaults:

<script lang="ts" setup>
import { compileSchema } from 'json-schema-library'

const schemaObject = compileSchema({
  type: 'object',
  required: ['firstname'],
  properties: {
    firstname: {
      title: 'First name',
      type: 'string',
      default: ''
    }
  }
})

const schema = ref(schemaObject.schema)
const state = ref(schemaObject.getData())

const onSubmit = (value: Record<string, unknown>) => {
  console.log(value)
}
</script>

<template>
  <SForm v-model="state" :schema="schema" @submit="onSubmit" />
</template>

• schema describes the form: each property becomes a field that matches its type.
• getData() returns a value that follows the schema, with every default filled in. Start from it so each field has a value to bind to.
• submit is emitted with the form's value once it passes validation.

Edit the props below to see how the form follows the schema:

<script setup lang="ts">
const schema = ref({
  type: 'object',
  required: [
    'test'
  ],
  properties: {
    test: {
      type: 'string',
      default: 'test'
    }
  }
})
const model-value = ref({
  test: 'test'
})
</script>

<template>
  <SForm :model-value="model-value" :schema="schema" />
</template>

Submit button

SForm renders a submit button below the fields. Replace it through the submit slot:

<SForm v-model="state" :schema="schema">
  <template #submit>
    <UButton type="submit" icon="i-lucide-send">Send</UButton>
  </template>
</SForm>

To hide the button, put an empty element in the slot. Vue falls back to the default button when the slot has no content at all.

<SForm v-model="state" :schema="schema">
  <template #submit><span /></template>
</SForm>

Next steps

• Layout: put fields side by side.
• Validation: validation rules and custom error messages.
• Custom renderers: render a property with your own component.