chore(vue3): migrate vue init

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/main.js

@@ -6,15 +6,14 @@
 import { getCSPNonce } from '@nextcloud/auth'
 import { emit } from '@nextcloud/event-bus'
 import { generateFilePath } from '@nextcloud/router'
-import Vue, { watch } from 'vue'
-import VueRouter from 'vue-router'
-import Vuex from 'vuex'
+import { createApp, watch } from 'vue'
 import App from './App.vue'
 import router from './router/router.ts'
 import { SettingsAPI } from './services/SettingsAPI.ts'
 import store from './store/index.js'
 import pinia from './stores/pinia.ts'
 import { useSidebarStore } from './stores/sidebar.ts'
+import { NextcloudGlobalsVuePlugin } from './utils/NextcloudGlobalsVuePlugin.js'
 
 import './init.js'
 // Leaflet icon patch
@@ -33,22 +32,12 @@ if (!IS_DESKTOP) {
 	__webpack_public_path__ = generateFilePath('spreed', '', 'js/')
 }
 
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
-
-Vue.use(Vuex)
-Vue.use(VueRouter)
-
-const instance = new Vue({
-	el: '#content',
-	store,
-	pinia,
-	router,
-	propsData: {
-		fileInfo: null,
-	},
-	render: (h) => h(App),
-})
+const instance = createApp(App, { fileInfo: null })
+	.use(store)
+	.use(pinia)
+	.use(router)
+	.use(NextcloudGlobalsVuePlugin)
+	.mount('#content')
 
 window.store = store
 

src/mainAdminSettings.js

@@ -3,16 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import AdminSettings from './views/AdminSettings.vue'
+import { NextcloudGlobalsVuePlugin } from './utils/NextcloudGlobalsVuePlugin.js'
 
 import '@nextcloud/dialogs/style.css'
 
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
-Vue.prototype.OCP = OCP
-
-export default new Vue({
-	el: '#admin_settings',
-	render: (h) => h(AdminSettings),
-})
+export default createApp(AdminSettings)
+	.use(NextcloudGlobalsVuePlugin)
+	.mount('#admin_settings')

src/mainFilesSidebar.js

@@ -5,12 +5,12 @@
 
 import { getCSPNonce } from '@nextcloud/auth'
 import { generateFilePath } from '@nextcloud/router'
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createApp } from 'vue'
 import FilesSidebarCallViewApp from './FilesSidebarCallViewApp.vue'
 import FilesSidebarTabApp from './FilesSidebarTabApp.vue'
 import store from './store/index.js'
 import pinia from './stores/pinia.ts'
+import { NextcloudGlobalsVuePlugin } from './utils/NextcloudGlobalsVuePlugin.js'
 
 import './init.js'
 // Leaflet icon patch
@@ -27,23 +27,15 @@ __webpack_nonce__ = getCSPNonce()
 // We do not want the index.php since we're loading files
 __webpack_public_path__ = generateFilePath('spreed', '', 'js/')
 
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
+const newCallView = () => createApp(FilesSidebarCallViewApp)
+	.use(store)
+	.use(pinia)
+	.use(NextcloudGlobalsVuePlugin)
 
-Vue.use(Vuex)
-
-const newCallView = () => new Vue({
-	store,
-	pinia,
-	render: (h) => h(FilesSidebarCallViewApp),
-})
-
-const newTab = () => new Vue({
-	store,
-	pinia,
-	id: 'talk-chat-tab',
-	render: (h) => h(FilesSidebarTabApp),
-})
+const newTab = () => createApp(FilesSidebarTabApp)
+	.use(store)
+	.use(pinia)
+	.use(NextcloudGlobalsVuePlugin)
 
 if (!window.OCA.Talk) {
 	window.OCA.Talk = {}

src/mainFilesSidebarLoader.js

@@ -46,7 +46,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 			async mount(el, fileInfo, context) {
 				if (tabInstance) {
-					tabInstance.$destroy()
+					tabInstance.unmount()
 				}
 
 				// Dirty hack to force the style on parent component
@@ -57,14 +57,14 @@ window.addEventListener('DOMContentLoaded', () => {
 
 				OCA.Talk.fileInfo = this.fileInfo
 				tabInstance = OCA.Talk.newTab()
-				tabInstance.$mount(el)
+				tabInstance.mount(el)
 			},
 			update(fileInfo) {
 				OCA.Talk.fileInfo = fileInfo
 			},
 			destroy() {
 				OCA.Talk.fileInfo = null
-				tabInstance.$destroy()
+				tabInstance.unmount()
 				tabInstance = null
 			},
 		}))

src/mainPublicShareAuthSidebar.js

@@ -5,12 +5,12 @@
 
 import { getCSPNonce } from '@nextcloud/auth'
 import { generateFilePath } from '@nextcloud/router'
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createApp } from 'vue'
 import PublicShareAuthRequestPasswordButton from './PublicShareAuthRequestPasswordButton.vue'
 import PublicShareAuthSidebar from './PublicShareAuthSidebar.vue'
 import store from './store/index.js'
 import pinia from './stores/pinia.ts'
+import { NextcloudGlobalsVuePlugin } from './utils/NextcloudGlobalsVuePlugin.js'
 
 import './init.js'
 // Leaflet icon patch
@@ -27,11 +27,6 @@ __webpack_nonce__ = getCSPNonce()
 // We do not want the index.php since we're loading files
 __webpack_public_path__ = generateFilePath('spreed', '', 'js/')
 
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
-
-Vue.use(Vuex)
-
 /**
  * Wraps all the body contents in its own container.
  *
@@ -92,20 +87,14 @@ function getShareToken() {
 	return shareTokenElement.value
 }
 
-const requestPasswordVm = new Vue({
-	store,
-	pinia,
-	id: 'talk-video-verification',
-	propsData: {
-		shareToken: getShareToken(),
-	},
-	...PublicShareAuthRequestPasswordButton,
-})
-requestPasswordVm.$mount('#request-password')
+createApp(PublicShareAuthRequestPasswordButton, { shareToken: getShareToken() })
+	.use(pinia)
+	.use(store)
+	.use(NextcloudGlobalsVuePlugin)
+	.mount('#request-password')
 
-const talkSidebarVm = new Vue({
-	store,
-	pinia,
-	...PublicShareAuthSidebar,
-})
-talkSidebarVm.$mount(document.querySelector('#talk-sidebar'))
+createApp(PublicShareAuthSidebar)
+	.use(pinia)
+	.use(store)
+	.use(NextcloudGlobalsVuePlugin)
+	.mount(document.querySelector('#talk-sidebar'))

src/mainPublicShareSidebar.js

@@ -6,12 +6,12 @@
 import { getCSPNonce } from '@nextcloud/auth'
 import { generateFilePath } from '@nextcloud/router'
 import { getSharingToken } from '@nextcloud/sharing/public'
-import Vue, { reactive } from 'vue'
-import Vuex from 'vuex'
+import { createApp, reactive } from 'vue'
 import PublicShareSidebar from './PublicShareSidebar.vue'
 import PublicShareSidebarTrigger from './PublicShareSidebarTrigger.vue'
 import store from './store/index.js'
 import pinia from './stores/pinia.ts'
+import { NextcloudGlobalsVuePlugin } from './utils/NextcloudGlobalsVuePlugin.js'
 
 import './init.js'
 // Leaflet icon patch
@@ -28,11 +28,6 @@ __webpack_nonce__ = getCSPNonce()
 // We do not want the index.php since we're loading files
 __webpack_public_path__ = generateFilePath('spreed', '', 'js/')
 
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
-
-Vue.use(Vuex)
-
 // An "isOpen" boolean should be passed to the component, but as it is a
 // primitive it would not be reactive; it needs to be wrapped in an object and
 // that object passed to the component to get reactivity.
@@ -56,16 +51,12 @@ function addTalkSidebarTrigger() {
 	const mountPoint = document.querySelector('.header-end') ?? document.getElementById('header')
 	mountPoint.appendChild(talkSidebarTriggerElement)
 
-	const talkSidebarTriggerVm = new Vue({
-		propsData: {
-			sidebarState,
+	createApp(PublicShareSidebarTrigger, {
+		sidebarState,
+		onClick: () => {
+			sidebarState.isOpen = !sidebarState.isOpen
 		},
-		...PublicShareSidebarTrigger,
-	})
-	talkSidebarTriggerVm.$on('click', () => {
-		sidebarState.isOpen = !sidebarState.isOpen
-	})
-	talkSidebarTriggerVm.$mount('#talk-sidebar-trigger')
+	}).mount('#talk-sidebar-trigger')
 }
 
 addTalkSidebarTrigger()
@@ -78,17 +69,14 @@ function addTalkSidebar() {
 	talkSidebarElement.setAttribute('id', 'talk-sidebar')
 	document.getElementById('content-vue').appendChild(talkSidebarElement)
 
-	const talkSidebarVm = new Vue({
-		store,
-		pinia,
-		id: 'talk-chat-tab',
-		propsData: {
-			shareToken: getSharingToken(),
-			state: sidebarState,
-		},
-		...PublicShareSidebar,
+	createApp(PublicShareSidebar, {
+		shareToken: getSharingToken(),
+		state: sidebarState,
 	})
-	talkSidebarVm.$mount(document.querySelector('#talk-sidebar'))
+		.use(pinia)
+		.use(store)
+		.use(NextcloudGlobalsVuePlugin)
+		.mount(document.querySelector('#talk-sidebar'))
 }
 
 addTalkSidebar()

src/mainRecording.js

@@ -6,13 +6,12 @@
 
 import { getCSPNonce } from '@nextcloud/auth'
 import { generateFilePath } from '@nextcloud/router'
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Vuex from 'vuex'
+import { createApp } from 'vue'
 import Recording from './Recording.vue'
 import router from './router/router.ts'
 import store from './store/index.js'
 import pinia from './stores/pinia.ts'
+import { NextcloudGlobalsVuePlugin } from './utils/NextcloudGlobalsVuePlugin.js'
 import {
 	signalingGetSettingsForRecording,
 	signalingJoinCallForRecording,
@@ -34,25 +33,18 @@ __webpack_nonce__ = getCSPNonce()
 // We do not want the index.php since we're loading files
 __webpack_public_path__ = generateFilePath('spreed', '', 'js/')
 
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
-
-Vue.use(Vuex)
-Vue.use(VueRouter)
-
 window.store = store
 
 if (!window.OCA.Talk) {
 	window.OCA.Talk = {}
 }
 
-const instance = new Vue({
-	el: '#content',
-	store,
-	pinia,
-	router,
-	render: (h) => h(Recording),
-})
+const instance = createApp(Recording)
+	.use(pinia)
+	.use(store)
+	.use(router)
+	.use(NextcloudGlobalsVuePlugin)
+	.mount('#content')
 
 // make the instance available to global components that might run on the same page
 OCA.Talk.instance = instance

src/stores/pinia.ts

@@ -3,9 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { createPinia, PiniaVuePlugin } from 'pinia'
-import Vue from 'vue'
-
-Vue.use(PiniaVuePlugin)
+import { createPinia } from 'pinia'
 
 export default createPinia()

src/utils/NextcloudGlobalsVuePlugin.js

@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export const NextcloudGlobalsVuePlugin = (app) => {
+	app.config.globalProperties.OC = window.OC
+	app.config.globalProperties.OCA = window.OCA
+	app.config.globalProperties.OCP = window.OCP
+}

src/utils/requestRoomSelection.js

@@ -3,11 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue, { defineAsyncComponent } from 'vue'
-
-Vue.prototype.OC = window.OC
-Vue.prototype.OCA = window.OCA
-Vue.prototype.OCP = window.OCP
+import { createApp, defineAsyncComponent } from 'vue'
+import { NextcloudGlobalsVuePlugin } from './NextcloudGlobalsVuePlugin.js'
 
 /**
  *
@@ -24,25 +21,20 @@ export function requestRoomSelection(containerId, roomSelectorProps) {
 
 		const RoomSelector = defineAsyncComponent(() => import('../components/RoomSelector.vue'))
 
-		const vm = new Vue({
-			render: (h) => h(RoomSelector, {
-				props: {
-					isPlugin: true,
-					...roomSelectorProps,
-				},
-			}),
-		}).$mount(container)
-
-		vm.$root.$on('close', () => {
-			container.remove()
-			vm.$destroy()
-			resolve(null)
-		})
-
-		vm.$root.$on('select', (conversation) => {
-			container.remove()
-			vm.$destroy()
-			resolve(conversation)
-		})
+		const app = createApp(RoomSelector, {
+			isPlugin: true,
+			...roomSelectorProps,
+			onClose: () => {
+				container.remove()
+				app.unmount()
+				resolve(null)
+			},
+			onSelect: (conversation) => {
+				container.remove()
+				app.unmount()
+				resolve(conversation)
+			},
+		}).use(NextcloudGlobalsVuePlugin)
+		app.mount(container)
 	})
 }

src/views/FilesSidebarCallView.js

@@ -21,7 +21,7 @@ export default class FilesSidebarCallView {
 		this.$el = document.createElement('div')
 		this.id = 'FilesSidebarCallView'
 
-		this.callViewInstance.$mount(this.$el)
+		this.callViewInstance.mount(this.$el)
 		this.$el = this.callViewInstance.$el
 
 		this.$el.replaceAll = function(target) {