Formvuelatte NPM

FormVueLatte 2.x

Visit FormVueLatte 2.0's full documentation for more detailed information and examples.

Getting Started

FormVueLatte is a zero dependency library that allows you to generate schema-driven forms with extreme ease.

The schema that you use for your form can be as flexible as you need it to be, it can be modified at run-time with an expected reactive result, and can even be fetched directly from you backend’s API.

Important

FormVueLatte is a bring-your-own-components (BYOC) library!

We do not provide any base components for your to build your forms. There are numerous component libraries out there that do a great job of providing carefully constructed components for you to use, and FormVueLatte does a great job at allowing you to bring those external components to your forms, or even crafting your own.

Installation

To add FormVueLatte to your project, start by installing the package through your favorite package manager.

yarn add formvuelatte
// OR
npm install formvuelatte

Now that you have the package in your project, import it to your component.

import { SchemaForm } from 'formvuelatte'

The SchemaForm requires two props. The first is the schema, which is the meta-data of your form. The second one is value, which will hold the state of the form.

<SchemaForm :schema="mySchema" :value="formData" />

The SchemaForm will $emit update:modelValue events when your components update. This means that you are able to either:

use v-model on it
or, manually capture the @update:modelValue event with a method of your own while injecting the :value property.

Example with v-model:

<template>
  <SchemaForm :schema="mySchema" v-model="formData" />
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    const formData = reactive({})
    const mySchema = reactive({
      // some schema here
    })

    return {
      formData,
      mySchema
    }
  }
}}
</script>

Example with manual bindings:

<template>
  <SchemaForm
    :schema="mySchema"
    :data="formData"
    @update:modelValue="updateForm"
  />
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    const formData = reactive({})
    const mySchema = reactive({
      // some schema here
    })

    const updateForm = form => {
      formData = form
    }

    return {
      formData,
      mySchema,
      updateForm
    }
  }
}}
</script>