Migrate to Vue 3

package.json

@@ -44,16 +44,15 @@
     "@nextcloud/moment": "^1.3.1",
     "@nextcloud/notify_push": "^1.3.0",
     "@nextcloud/router": "^3.0.1",
-    "@nextcloud/vue": "^8.11.3",
+    "@nextcloud/vue": "^9.0.0-alpha.3",
     "core-js": "^3.37.1",
     "electron-squirrel-startup": "^1.0.1",
-    "floating-vue": "^1.0.0-beta.19",
     "howler": "^2.2.4",
     "pinia": "^2.1.7",
     "semver": "^7.6.2",
     "undici": "6.6.2",
     "unzip-crx-3": "^0.2.0",
-    "vue": "^2.7.16",
+    "vue": "^3.4.27",
     "vue-material-design-icons": "^5.3.0"
   },
   "devDependencies": {
@@ -65,10 +64,10 @@
     "@electron-forge/plugin-webpack": "^7.4.0",
     "@nextcloud/eslint-config": "^8.4.1",
     "@nextcloud/eslint-plugin": "^2.2.1",
-    "@nextcloud/webpack-vue-config": "^6.0.1",
+    "@nextcloud/webpack-vue-config": "github:nextcloud-libraries/webpack-vue-config#vue3",
     "@vercel/webpack-asset-relocator-loader": "^1.7.4",
     "@vue/tsconfig": "^0.5.1",
-    "css-loader": "^6.10.0",
+    "css-loader": "^7.1.2",
     "dotenv": "^16.4.5",
     "electron": "^30.0.9",
     "esbuild-loader": "^4.1.0",
@@ -82,7 +81,7 @@
     "icon-gen": "^4.0.0",
     "node-loader": "^2.0.0",
     "regenerator-runtime": "^0.14.1",
-    "style-loader": "^3.3.4",
+    "style-loader": "^4.0.0",
     "vue-eslint-parser": "^9.4.3",
     "webpack": "^5.91.0",
     "webpack-merge": "^5.10.0",

src/authentication/renderer/AuthenticationApp.vue

@@ -16,7 +16,7 @@
 					</h2>
 					<NcTextField :label="t('talk_desktop', 'Nextcloud server address')"
 						label-visible
-						:value.sync="rawServerUrl"
+						v-model="rawServerUrl"
 						placeholder="https://try.nextcloud.com"
 						inputmode="url"
 						:success="state === 'success'"

src/authentication/renderer/authentication.main.js

@@ -7,10 +7,10 @@
 import '../../shared/assets/default/default.css'
 import '../../shared/assets/default/server.css'
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import AuthenticationApp from './AuthenticationApp.vue'
 import { setupWebPage } from '../../shared/setupWebPage.js'
 
 await setupWebPage()
 
-new Vue(AuthenticationApp).$mount('#app')
+createApp(AuthenticationApp).mount('#app')

src/help/renderer/HelpApp.vue

@@ -22,7 +22,7 @@
 			</li>
 		</ul>
 		<NcTextArea :aria-label="t('talk_desktop', 'System report')"
-			:value="report"
+			:model-value="report"
 			rows="11"
 			readonly
 			class="about__report"

src/help/renderer/help.app.js

@@ -6,10 +6,10 @@
 import '../../shared/assets/default/default.css'
 import '../../shared/assets/default/server.css'
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import HelpApp from './HelpApp.vue'
 import { setupWebPage } from '../../shared/setupWebPage.js'
 
 await setupWebPage()
 
-new Vue(HelpApp).$mount('#app')
+createApp(HelpApp).mount('#app')

src/shared/globals/OC/dialogs.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 let ocDialogsAdapter = null
 
@@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 	const container = document.body.appendChild(document.createElement('oc-dialog-wrapper'))
 
-	ocDialogsAdapter = new Vue(OcDialogsAdapter).$mount(container)
+	ocDialogsAdapter = createApp(OcDialogsAdapter).mount(container)
 })
 
 export const dialogs = {

src/talk/renderer/Viewer/Viewer.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import ViewerApp from './ViewerApp.vue'
 import ViewerHandlerImages from './ViewerHandlerImages.vue'
 import ViewerHandlerVideos from './ViewerHandlerVideos.vue'
@@ -57,7 +57,7 @@ export function createViewer() {
 	}
 
 	const container = document.body.appendChild(document.createElement('div'))
-	Viewer.instance = new Vue(ViewerApp).$mount(container)
+	Viewer.instance = createApp(ViewerApp).mount(container)
 
 	return Viewer
 }

src/talk/renderer/desktop.app.js

@@ -3,17 +3,13 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
-import { createPinia, PiniaVuePlugin } from 'pinia'
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import DesktopHeader from './DesktopHeader.vue'
 
 /**
  * @return {import('vue').ComponentPublicInstance}
  */
 export function createDesktopApp() {
-	Vue.use(PiniaVuePlugin)
-
-	const DesktopHeaderApp = Vue.extend(DesktopHeader)
-
-	return new DesktopHeaderApp({ pinia: createPinia() }).$mount('#desktop-header')
+	return createApp(DesktopHeader).use(createPinia()).mount('#desktop-header')
 }

src/talk/renderer/getDesktopMediaSource.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 import AppGetDesktopMediaSource from './AppGetDesktopMediaSource.vue'
 
@@ -18,7 +18,7 @@ let appGetDesktopMediaSourceInstance
 export async function getDesktopMediaSource() {
 	if (!appGetDesktopMediaSourceInstance) {
 		const container = document.body.appendChild(document.createElement('div'))
-		appGetDesktopMediaSourceInstance = new Vue(AppGetDesktopMediaSource).$mount(container)
+		appGetDesktopMediaSourceInstance = createApp(AppGetDesktopMediaSource).mount(container)
 	}
 
 	return appGetDesktopMediaSourceInstance.promptDesktopMediaSource()

src/upgrade/renderer/upgrade.app.js

@@ -6,10 +6,10 @@
 import '../../shared/assets/default/default.css'
 import '../../shared/assets/default/server.css'
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import UpgradeApp from './UpgradeApp.vue'
 import { setupWebPage } from '../../shared/setupWebPage.js'
 
 await setupWebPage()
 
-new Vue(UpgradeApp).$mount('#app')
+createApp(UpgradeApp).mount('#app')