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.