<VueForm> - The Root Component

The root component that wires everything together. It manages the entire data lifecycle - state, fields, values, and API calls -and provides context for all child components.

It's the only component you must include. Every other component depends on the context provided by <VueForm>.

<template>
  <VueForm>
    <template #default="{...}">
      <!-- Child Components-->
    </template>
  </VueForm>
</template>

Props

schema

• Type: Object
• Default: null

Schema defining the form structure. When using validation libraries like Zod or Yup, you define your form structure in a schema. You need to write a global option or provide a local prop to convert schema to fields array. Read more

<template>
  <VueForm :schema="userSchema" />
</template>

<script setup>
import { z } from "zod";

const userSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
  age: z.number().min(18),
});
</script>

itemId

• Type: Number|String

The identifier passed to global or local resolveMode for mode detection. Use special strings like '+' or 'create' to indicate create mode, or pass the database ID for update mode.

<!-- Create mode -->
<VueForm :item-id="'+'" />
<VueForm :item-id="'create'" />

<!-- Update mode -->
<VueForm :item-id="7" />
<VueForm :item-id="'abc-123'" />

<!-- From route params -->
<VueForm :item-id="$route.params.id" />

See how to use itemId in resolveMode here

create

• Type: Function
• Signature: (context) => Promise<VueFormApiResponse>

Async function called when the create button is clicked. Receives the fullcontext object and must return a promise resolving to a VueFormApiResponse.

function create(context){
  return fetch('/api/users/').then(res=>{
    return {
      values:{...} // {key:value} pairs for each field
    }
  })
}

Important

Do not catch errors in your create, read, update, delete, archive, or unarchive methods. Read more

read

• Type: Function
• Signature: (context) => Promise<VueFormApiResponse>

Async function called when the component is mounted and update mode is detected. Must return a promise resolving to a VueFormApiResponse.

function read(context){
  return fetch(`/api/users/${context.itemId}`).then(res=>{
    return {
      values:{...} // {key:value} pairs for each field
    }
  })
}

update

• Type: Function
• Signature: (context) => Promise<VueFormApiResponse>

Async function called when the update button is clicked. Must return a promise resolving to a VueFormApiResponse.

function update(context){
  return fetch(`/api/users/${context.itemId}`).then(res=>{
    return {
      values:{...} // {key:value} pairs for each field
    }
  })
}

delete

• Type: Function
• Signature: (context) => Promise<VueFormApiResponse>

Async function called when the delete button is clicked. Must return a promise resolving to a VueFormApiResponse.

function update(context){
  return fetch(`/api/users/${context.itemId}`).then(res=>{
    return {
      values:{...} // {key:value} pairs for each field
    }
  })
}

archive

• Type: Function
• Signature: (context) => Promise<VueFormApiResponse>

Async function called when the delete button is clicked. Must return a promise resolving to a VueFormApiResponse.

function update(context){
  return fetch(`/api/users/${context.itemId}`).then(res=>{
    return {
      values:{...} // {key:value} pairs for each field
    }
  })
}

unarchive

• Type: Function
• Signature: (context) => Promise<VueFormApiResponse>

Async function called when the delete button is clicked. Must return a promise resolving to a VueFormApiResponse.

function update(context){
  return fetch(`/api/users/${context.itemId}`).then(res=>{
    return {
      values:{...} // {key:value} pairs for each field
    }
  })
}

meta

• Type: Object

Additional data to pass. This data is available in context.meta.

schemaToFields

To override global schemaToFields function. Read more

errorAdapter

To override global errorAdapter function. Read more

Events

There are no events added at the moment.

Slots

default

The only slot available in <VueForm> is default. It exposes a set of scoped variables that you can access.

Slot Props

Key	Description
context	Object The context object
readItem	Function Wrapper of read function. You can use this method to manually do the read call
updateItem	Function Wrapper of update function. You can use this instead of <VueFormUpdate>
deleteItem	Function Wrapper of delete function. You can use this instead of <VueFormDelete>
archiveItem	Function Wrapper of archive function. You can use this instead of <VueFormArchive>
unarchiveItem	Function Wrapper of unarchive function. You can use this instead of <VueFormUnarchive>