diff --git a/client/src/ui/commoncomponents.js b/client/src/ui/commoncomponents.js
index e357fbae..0bb9ee28 100644
--- a/client/src/ui/commoncomponents.js
+++ b/client/src/ui/commoncomponents.js
@@ -2,6 +2,7 @@ export { ReactComponent } from './vue';
 
 export * from './components/common';
 
+export { default as SettingsWrapper } from './components/bd/SettingsWrapper.vue';
 export { default as SettingsPanel } from './components/bd/SettingsPanel.vue';
 export { default as Setting } from './components/bd/setting/Setting.vue';
 export { default as Card } from './components/bd/Card.vue';
diff --git a/tests/ext/plugins/Example 4/index.js b/tests/ext/plugins/Example 4/index.js
index eb0912a8..d142d875 100644
--- a/tests/ext/plugins/Example 4/index.js	
+++ b/tests/ext/plugins/Example 4/index.js	
@@ -1,4 +1,4 @@
-exports.main = (Plugin, { Logger, Settings, Modals, BdMenu: { BdMenuItems }, Api }) => class extends Plugin {
+exports.main = (Plugin, { Logger, Settings, Modals, BdMenu: { BdMenuItems }, CommonComponents, Api }) => class extends Plugin {
     async onstart() {
         this.keybindEvent = this.keybindEvent.bind(this);
 
@@ -54,10 +54,12 @@ exports.main = (Plugin, { Logger, Settings, Modals, BdMenu: { BdMenuItems }, Api
         this.menuItem = BdMenuItems.addSettingsSet('Plugins', set, 'Plugin 4');
 
         this.menuItem2 = BdMenuItems.addVueComponent('Plugins', 'Also Plugin 4', {
-            template: `<component :is="SettingsWrapper" :headertext="plugin.name + ' custom menu panel'">
+            template: `<settings-wrapper :headertext="plugin.name + ' custom menu panel'">
                 <p style="margin-top: 0; color: #f6f6f7;">Test</p>
-            </component>`,
-            props: ['SettingsWrapper'],
+            </settings-wrapper>`,
+            components: {
+                SettingsWrapper: CommonComponents.SettingsWrapper
+            },
             data() { return {
                 Api, plugin: Api.plugin
             }; }