Plugins

Learn how to extend Vueform with plugins.

Examples

Check out our official plugins for inspiration:

Registering Plugins

Plugins can be applied in vueform.config.js:

// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import vueformPlugin from '@vueform/vueform-plugin'

export default defineConfig({
  plugins: [
    vueformPlugin,
  ],
  // ...
})

Plugin Options

A plugin must be a function that returns an object with the plugin options.

export default function myPlugin() {
  return {
    // ... plugin options
  }
}

apply

Type: string|regex|array
Default: undefined

Which components in Vueform this plugin's setup option should be applied to.

export default function myPlugin() {
  return {
    apply: /^[a-zA-Z]+Element$/,
    setup(props, context, component) { /* ... */ },
  }
}

It can be an exact component name as a string:

apply: 'TextElement',

Multiple component names as an array:

apply: ['TextElement', 'TextareaElement'],

A regex, eg. which applies to each element:

apply: /^[a-zA-Z]+Element$/,

Or an array of regex:

apply: [/^[a-zA-Z]+Element/, /^Element[a-zA-Z]+$/],

If left empty and the plugin contains a setup option it will be applied to each component. Component names can be found at Components page.

setup

Type: function
Arguments:
- {object} props - the Composition API's props object
- {object} context - the Composition API's context object
- {object} component - the component's exported properties and methods
Returns: object - component properties and methods

Extends the component's properties and methods.

import { ref } from 'vue'

export default function myPlugin() {
  return {
    apply: 'TextElement',
    setup(props, context, component) {
      const myRef = ref('Hello World')

      // Hides all text element by default
      component.hidden.value = true

      return {
        ...component,
        myRef,
      }
    },
  }
}

The component argument is an object containing all the component's properties and methods. Properties are either ref or computed objects so .value is required to access / modify their values.

Component properties and methods can be found at Components page.

props

Type: object
Default: {}

Extends the component's prop list.

export default function myPlugin() {
  return {
    apply: 'TextElement',
    props: {
      format: {
        type: String,
        required: false,
      }
    }
  }
}

config

Type: function
Arguments:
- {object} config - the default Vueform config object
Returns: void

Modifies the default configuration. Executed before project level config is applied.

import myPreset from 'my-preset'

export default function myPlugin() {
  return {
    config(config) {
      // Adds a new config value
      config.foo = 'bar'

      // Applies `myPreset` by default to all Vueform instances
      config.presets.myPreset = myPreset
      config.usePresets.push('myPreset')
    }
  }
}

install

Type: function
Arguments:
- {object} app - the Vue.js app instance
- {object} $vueform - the global $vueform object
Returns: void

Executed after configuration object is resolved, before registering components and setting global $vueform object. Only use this, if you know what you are doing.

export default function myPlugin() {
  return {
    install(app, $vueform) {
      // Adding new variable to global $vueform object
      $vueform.foo = 'bar'
    }
  }
}

Plugins ​

Examples ​

Registering Plugins ​

Plugin Options ​

apply ​

setup ​

props ​

config ​

install ​