Vuewrap

client/src/modules/pluginapi.js

@@ -24,6 +24,7 @@ import DiscordApi from './discordapi';
 import { ReactComponents, ReactHelpers } from './reactcomponents';
 import { Patcher, MonkeyPatch } from './patcher';
 import GlobalAc from '../ui/autocomplete';
+import Vue from 'vue';
 
 export default class PluginApi {
 
@@ -607,6 +608,10 @@ export default class PluginApi {
         });
     }
 
+    Vuewrap(id, args) {
+        return VueInjector.createReactElement(Vue.component(id, args));
+    }
+
 }
 
 // Stop plugins from modifying the plugin API for all plugins

tests/ext/plugins/Custom Elements Example/index.js

@@ -5,7 +5,7 @@
 module.exports = (Plugin, Api, Vendor) => {
 
     // Destructure some apis
-    const { Logger, ReactComponents, Patcher, monkeyPatch, Reflection, Utils, CssUtils, VueInjector } = Api;
+    const { Logger, ReactComponents, Patcher, monkeyPatch, Reflection, Utils, CssUtils, VueInjector, Vuewrap } = Api;
     const { Vue } = Vendor;
     const { React } = Reflection.modules; // This should be in vendor
 
@@ -87,9 +87,22 @@ module.exports = (Plugin, Api, Vendor) => {
                 }
             });
 
+            // You can also use Vuewrap which does the wrapping for us
+            const vueWrapComponent = Vuewrap('somecomponent', {
+                render: createElement => {
+                    return createElement('button', {
+                        class: 'exampleCustomElement',
+                        on: {
+                            click: e => this.handleClick(e, child.channel)
+                        }
+                    }, 'vw')
+                }
+            });
+
             // Add our custom components to children
             child.children.push(reactComponent);
             child.children.push(VueInjector.createReactElement(vueComponent)); // We need to wrap our vue component inside react
+            child.children.push(vueWrapComponent);
         }
 
         /**