# 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.

Please share!

Vue Formulate is brand new, so if you publish a custom input plugin on npm or GitHub and want to share it, submit a pull request or file an issue on the documentation repository and we'll list it on this page.

# 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.