allow components to use plugins too, resolve Browserify Vue.require issue

Author: Evan You

src/main.js

@@ -4,6 +4,11 @@ var config      = require('./config'),
     makeHash    = utils.hash,
     assetTypes  = ['directive', 'filter', 'partial', 'transition', 'component']
 
+// require these so Browserify can catch them
+// so they can be used in Vue.require
+require('./observer')
+require('./transition')
+
 ViewModel.options = config.globalAssets = {
     directives  : require('./directives'),
     filters     : require('./filters'),
@@ -48,13 +53,6 @@ ViewModel.config = function (opts, val) {
     return this
 }
 
-/**
- *  Expose internal modules for plugins
- */
-ViewModel.require = function (path) {
-    return require('./' + path)
-}
-
 /**
  *  Expose an interface for plugins
  */
@@ -69,13 +67,21 @@ ViewModel.use = function (plugin) {
 
     // additional parameters
     var args = [].slice.call(arguments, 1)
-    args.unshift(ViewModel)
+    args.unshift(this)
 
     if (typeof plugin.install === 'function') {
         plugin.install.apply(plugin, args)
     } else {
         plugin.apply(null, args)
     }
+    return this
+}
+
+/**
+ *  Expose internal modules for plugins
+ */
+ViewModel.require = function (path) {
+    return require('./' + path)
 }
 
 ViewModel.extend = extend
@@ -118,15 +124,19 @@ function extend (options) {
     }
 
     // allow extended VM to be further extended
-    ExtendedVM.extend = extend
-    ExtendedVM.super = ParentVM
+    ExtendedVM.extend  = extend
+    ExtendedVM.super   = ParentVM
     ExtendedVM.options = options
 
     // allow extended VM to add its own assets
     assetTypes.forEach(function (type) {
         ExtendedVM[type] = ViewModel[type]
     })
 
+    // allow extended VM to use plugins
+    ExtendedVM.use     = ViewModel.use
+    ExtendedVM.require = ViewModel.require
+
     return ExtendedVM
 }
 

test/unit/specs/api.js

@@ -380,6 +380,14 @@ describe('UNIT: API', function () {
             assert.ok(Sub.options.partials.test instanceof window.DocumentFragment)
         })
 
+        it('should allow subclasses to use plugins', function () {
+            var Sub = Vue.extend({})
+            Sub.use(function (Sub) {
+                Sub.directive('hello', {})
+            })
+            assert.ok(Sub.options.directives.hello)
+        })
+
         describe('Options', function () {
 
             describe('methods', function () {