Create 'view' mode

Learn how to create a view mode for forms.

We can write a plugin, that disables all elements when view-mode is turned on:

js
// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import { watch, computed } from 'vue'

const viewModePlugin = () => ([
  // Add `viewMode` prop to Vueform
  {
    apply: 'Vueform',
    props: {
      viewMode: {
        required: false,
        default: false,
        type: Boolean,
      }
    }
  },
  
  // Disable all elements when `viewMode: true`
  {
    apply: /^[A-Za-z]+Element$/,
    setup(props, context, component) {
      const { form$, disable, enable } = component

      // The element can't be disabled
      if (typeof disable === 'undefined') {
        return component
      }

      // Disable element if viewMode is turned on
      if (form$.value.viewMode) {
        disable()
      }

      // Disable / enable element as viewMode changes
      watch(computed(() => form$.value.viewMode), (viewMode) => {
        viewMode ? disable() : enable()
      })

      return component
    }
  }
])

export default defineConfig({
  plugins: [
    viewModePlugin,
  ]
})

After that we can use it by adding view-mode to <Vueform> component:

vue
<Vueform view-mode />
  
👋 Hire Vueform team for form customizations and developmentLearn more