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:

  <div id="app" class="h-screen">

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

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:


<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
👋 Hire Vueform team for form customizations and developmentLearn more