Writing a Plugin
Plugins usually add global-level functionality to Vue. There is no strictly defined scope for a plugin - there are typically several types of plugins you can write:
-
Add some global methods or properties. e.g. vue-element
-
Add one or more global assets: directives/filters/transitions etc. e.g. vue-touch
-
Add some Vue instance methods by attaching them to Vue.prototype.
-
A library that provides an API of its own, while at the same time injecting some combination of the above. e.g. vue-router
A Vue.js plugin should expose an install
method. The method will be called with the Vue
constructor as the first argument, along with possible options:
MyPlugin.install = function (Vue, options) { // 1. add global method or property Vue.myGlobalMethod = ... // 2. add a global asset Vue.directive('my-directive', {}) // 3. add an instance method Vue.prototype.$myMethod = ... }
Using a Plugin
Use plugins by calling the Vue.use()
global method:
// calls `MyPlugin.install(Vue)` Vue.use(MyPlugin)
You can optionally pass in some options:
Vue.use(MyPlugin, { someOption: true })
Some plugins such as vue-router
automatically calls Vue.use()
if Vue
is available as a global variable. However in a module environment you always need to call Vue.use()
explicitly:
// When using CommonJS via Browserify or Webpack var Vue = require('vue') var VueRouter = require('vue-router') // Don't forget to call this Vue.use(VueRouter)
Existing Plugins & Tools
-
vue-router: The official router for Vue.js. Deeply integrated with Vue.js core to make building Single Page Applications a breeze.
-
vue-resource: A plugin that provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.
-
vue-async-data: Async data loading plugin.
-
vue-validator: A plugin for form validations.
-
vue-devtools: A Chrome devtools extension for debugging Vue.js applications.
-
vue-touch: Add touch-gesture directives using Hammer.js.
-
vue-element: Register Custom Elements with Vue.js.
-
vue-animated-list: A plugin for easily animating
v-for
rendered lists.
Please login to continue.