fix(viewer): mount ViewerComponent Vue from text module

The component configured in the viewer handler
is instantiated from the vue module inside the viewer.

We want to use our own vue module
so create an instance with an import of our own vue and mount it.

This fixes warnings in development like $attrs is readonly.
Also makes the vue2 dev tools work.

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

src/apis/connect.ts

@@ -53,7 +53,7 @@ export async function open(
 /**
  * Update the guest name
  * @param guestName the name to use for the local user
- * @param connection connection to close
+ * @param connection connection to update the guest name for
  */
 export async function update(
 	guestName: string,

src/components/ViewerComponent.vue

@@ -26,10 +26,11 @@
 
 <script>
 import { getSharingToken } from '@nextcloud/sharing/public'
+import { defineComponent } from 'vue'
 import getEditorInstance from './Editor.singleton.js'
 import SourceView from './SourceView.vue'
 
-export default {
+export default defineComponent({
 	name: 'ViewerComponent',
 	components: {
 		SourceView,
@@ -112,7 +113,7 @@ export default {
 		},
 		t,
 	},
-}
+})
 </script>
 <style lang="scss" scoped>
 .text-editor:not(.viewer__file--hidden) {

src/viewer.js

@@ -12,10 +12,10 @@ import { openMimetypesMarkdown, openMimetypesPlainText } from './helpers/mime.js
  * Wrapper for async registration of ViewerComponent.
  * Note: it should be named function - the name is used for component registration.
  *
- * @return {Promise<import('./components/ViewerComponent.vue')>} ViewerComponent
+ * @return {Promise<import('./views/ViewerView.js')>} ViewerComponent
  */
 function AsyncTextViewerComponent() {
-	return import('./components/ViewerComponent.vue')
+	return import('./views/ViewerView.js')
 }
 
 if (typeof OCA.Viewer === 'undefined') {

src/views/ViewerView.js

@@ -0,0 +1,39 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import Vue, { defineComponent } from 'vue'
+import ViewerComponent from '../components/ViewerComponent.vue'
+
+// The vue instance used inside text constructed with the import above.
+let innerVue
+
+/**
+ * This thin Component wrapper can be rendered inside the viewer.
+ *
+ * The viewers vue instance is used for this component as it simply exports
+ * the options for the options api.
+ *
+ * When mounted this component constructs the vue instance
+ * used inside text based on texts vue import.
+ */
+export default defineComponent({
+	name: 'ViewerView',
+	render: (h) => h('div'),
+	props: ViewerComponent.props,
+	mounted() {
+		innerVue = new Vue({
+			render: (h) => {
+				return h(ViewerComponent, {
+					props: this.$props,
+					on: this.$listeners,
+				})
+			},
+		})
+		innerVue.$mount(this.$el)
+	},
+	beforeDestroy() {
+		innerVue.$destroy()
+	},
+})