Saving ​

Saving forms in Vueform Builder.

To save the output of the form, you can subscribe to the @save event, which is triggered anytime the form settings are changed:

<template>
  <div id="app" class="h-screen">
    <VueformBuilder
      @save="handleSave"
    />
  </div>
</template>

<script setup>
const handleSave = (builderObject, history) => {
  // builderObject - the object that should be saved to the db (and loaded)
  // history - the array of previous builderObjects
}
</script>

The @save event has two parameters:

• builderObject {object}: the object that should be saved to the database (and can be loaded).
• history {array}: the array of previous builderObjects.

The history object contains only the last n elements, which is limited by the local storage capacity (usually 5 MB, enough for about 100 records for an average form).

Manual Saving ​

The current state of the form is always available in local storage as vueform-builder and vueform-history.

To manually save the form at any time, retrieve these values from local storage:

const builderObject = localStorage.getItem('vueform-builder')
const history = localStorage.getItem('vueform-history')

Alternatively, you can access the builder object via the <VueformBuilder> component:

<template>
  <VueformBuilder
    ref="builder$"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const builder$ = ref()

onMounted(() => {
  console.log(builder$.value.builder) // builderObject
  console.log(builder$.value.History.history) // history
})
</script>

In this approach, you can access the builder object and history array programmatically from the VueformBuilder component using its ref.