Plugins

Learn how to extend Vueform with plugins.

Registering Plugins

Plugins can be applied in vueform.config.js:

// vueform.config.js

import vueformPlugin from 'vueform-plugin'

export default {
  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 API Reference 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' // from '@vue/composition-api' in Vue.js 2

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 API Reference 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'
    }
  }
}