feat: add Vue component for tab content

extension.json

@@ -30,7 +30,8 @@
 		"ext.tabberNeue.codex": {
 			"packageFiles": [
 				"ext.tabberNeue.codex/ext.tabberNeue.codex.js",
-				"ext.tabberNeue.codex/App.vue"
+				"ext.tabberNeue.codex/App.vue",
+				"ext.tabberNeue.codex/TabContent.vue"
 			],
 			"styles": [
 				"ext.tabberNeue.codex/ext.tabberNeue.codex.less"

modules/ext.tabberNeue.codex/App.vue

@@ -6,8 +6,11 @@
 			:name="tab.name"
 			:label="tab.label"
 			:disabled="tab.disabled"
-			v-html="tab.content"
 		>
+			<tab-content
+				:html="tab.content"
+			>
+			</tab-content>
 		</cdx-tab>
 	</cdx-tabs>
 </template>
@@ -16,6 +19,7 @@
 const { defineComponent } = require( 'vue' );
 // Codex is available from ResourceLoader at runtime and is available without needing a build step.
 const { CdxTabs, CdxTab } = require( '@wikimedia/codex' );
+const TabContent = require( './TabContent.vue' );
 
 // @vue/component
 module.exports = exports = defineComponent( {
@@ -28,7 +32,8 @@ module.exports = exports = defineComponent( {
 	},
 	components: {
 		CdxTabs: CdxTabs,
-		CdxTab: CdxTab
+		CdxTab: CdxTab,
+		TabContent: TabContent
 	},
 	props: {
 		tabberData: {

modules/ext.tabberNeue.codex/TabContent.vue

@@ -0,0 +1,30 @@
+<template>
+	<div 
+		v-html="html"
+	>
+	</div>
+</template>
+
+<script>
+const { defineComponent } = require( 'vue' );
+
+// @vue/component
+module.exports = exports = defineComponent( {
+	name: 'TabContent',
+	compatConfig: {
+		MODE: 3
+	},
+	compilerOptions: {
+		whitespace: 'condense'
+	},
+	props: {
+		html: {
+			type: String,
+			required: true
+		}
+	},
+	mounted: function () {
+		this.$el.parentElement.innerHTML = this.$el.innerHTML;
+	}
+} );
+</script>