a891df2

I have a few questions about the plugin interface!

1. What is the usage of the require param here (which is now Vue.require according to main.js)?
   For example, is it correct to assume that Vue.require('utils') will be available, and to use it in a plugin?
2. Why do we have the choice between returning a function or an object containing { install: function(){} }? Is it to keep the same design than directives, computed properties, etc.?
3. I would like to allow the user to configure a plugin before adding it. Some ideas:

Idea 1: a configuration function

// my-plugin.js
module.exports = function(config) {
  return function(Vue) {
  };
};

// my-app.js
var myPlugin = require('my-plugin');
Vue.use(myPlugin({ foo: 'bar' }));

The issue with that solution is that it disables the usage of the shorthand:

// my-app.js
Vue.use('my-plugin'); // Won’t work, only the configure function is called

Idea 2: add a config hook

// my-plugin.js
module.exports = {
  config: function(config) {
    this.foo = config.foo;
    return this.install;
  },
  install: function(Vue) {
  }
};

// my-app.js
var myPlugin = require('my-plugin');

// This would allow this (`config` returns `this.install`):
Vue.use(myPlugin.config({ foo: 'bar' }));

// Or this, with the configuration passed as a second param:
Vue.use('my-plugin', { foo: 'bar' });

// And of course, this (`install` is directly called, no config):
Vue.use(myPlugin);
Vue.use('my-plugin');

// Or a global configuration:
myPlugin.config({ foo: 'bar' });
Vue.use(myPlugin);
AnotherVue.use(myPlugin);

As you can see in the last example, there is still an issue with this solution: each time .config() is called, the settings defined on the plugin object will persist and be shared between the plugin’s instances.

A solution could be to wrap this in some magic (which is more verbose…):

// my-plugin.js

// Vue.plugin() ensures that each time .config() is called, a new object is created.
var Vue = require('vue');
module.exports = Vue.plugin({
  config: function() {
  },
  install: function() {
  }
});

…but another problem is that require could be missing (e.g. with Vue on window.Vue), and it will require some detection code, which is not acceptable for a plugin interface.

I don’t really like the second idea, because it adds “Plugin” concept, and I think the less concepts we have, the better it is. Also, maybe I’m missing a super elegant solution that already exists for what I’m trying to achieve: sorry if it’s the case.

What do you think?

Thanks for the suggestions Pierre! The original issue is a bit out of date - require is no longer passed in as an argument. I have edited it.

• Vue.require works as you'd expect - it exposes internal modules like utils, compiler, etc.
• Allowing both function and { install: function () {}} is just for convenience - similar to the directive and computed property APIs.
• For configuration - I think we can do this:

Vue.use(plugin, { foo: 'bar' })
// or
Vue.use('my-plugin', { foo: 'bar' })

We just need to change Vue.use's implementation to:

Vue.use = function (plugin, options) {
    // if plugin is string require it
    plugin.install(Vue, options)
}

Inside plugins:

exports.install = function (Vue, options) {
    // do stuff based on options
}

Plugins that don't need options can simply ignore the options argument. I want plugins to be implemented without having to require Vue at all, so that we can easily mock Vue and test the plugin.

Thanks for your answers!