Saving ​

Saving forms in Vueform Builder.

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

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

<script>
  export default {
    methods: {
      handleSave(builderObject, history) {
        // builderObject - the object that should be saved to db (and loaded)
        // history - the array of previous builderObjects
      },
    }
  }
</script>

The @save event has two params:

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

The history object only contains the last n elements which is possible to store given the local storage limit of 5 MB in most cases (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 save the form anytime just reach for these values:

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

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

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

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

const builder$ = ref(null)

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