Vue Formulate

# Plugins

Plugins are just simple functions that are given access to the Vue Formulate instance and can extend it. This is most helpful if you want to codify your own custom validation rules, messages or inputs.

# Community plugins

This is a short list of community created plugins, add your own to this list by editing this page (opens new window):

# Creating a new plugin

Plugins are just functions that are passed to Vue Formulate when registering and are then called upon instantiation.

# Simple example

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'

// Our first plugin
function myFirstPlugin (instance) {
  // Add a new validation rule
  instance.extend({
    rules: {
      foobar: ({ value }) => ['foo', 'bar'].includes(value)
    }
  })
}

Vue.use(VueFormulate, {
  plugins: [ myFirstPlugin ]
})

# The extend method

The instance of Vue Formulate passed to your plugin contains an extend method that recursively extends the instance configuration options. This can be used to overwrite and add any configuration options.

# Example autocomplete plugin

A common use case for a plugin is to re-use custom inputs, so as an example lets create a plugin that exposes the autocomplete input from the custom inputs documentation page.

// file: Autocomplete.js
import MyFormulateAutocomplete from './components/MyFormulateAutocomplete'

export default function (formulateInstance) {
  formulateInstance.extend({
    components: {
      MyFormulateAutocomplete
    },
    library: {
      autocomplete: {
        classification: 'text',
        component: 'MyFormulateAutocomplete'
      }
    }
  })
}

Note

In the above code, we use Vue Formulate to register our component by adding it to the components object. This is a convenience, but you are not required to register the component with Vue Formulate as long as it’s been globally registered.

// index.js (or where you add your vue plugins)
import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
import Autocomplete from './Autocomplete'

Vue.use(VueFormulate, {
  plugins: [ Autocomplete ]
})

Of course, the above code could also be bundled up into a tidy npm package and published for public consumption.

← Internationalization →