chore: update dependencies and refactor components for Vue 3 compatibility

Chartman123 · Chartman123 · commit d3e1e4be89fc · 2026-01-14T20:22:35.000+01:00
Signed-off-by: Christian Hartmann &lt;chris-hartmann@gmx.de&gt;
diff --git a/eslint.config.js b/eslint.config.js
@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { recommendedVue2 } from '@nextcloud/eslint-config'
+import { recommended } from '@nextcloud/eslint-config'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 
 export default [
-	...recommendedVue2,
+	...recommended,
 	eslintPluginPrettierRecommended,
 ]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,24 +31,24 @@
   "dependencies": {
     "@nextcloud/auth": "^2.5.3",
     "@nextcloud/axios": "^2.5.2",
-    "@nextcloud/dialogs": "^6.4.2",
+    "@nextcloud/dialogs": "^7.0.1",
     "@nextcloud/event-bus": "^3.3.3",
     "@nextcloud/files": "^3.12.1",
     "@nextcloud/initial-state": "^3.0.0",
     "@nextcloud/l10n": "^3.4.1",
     "@nextcloud/logger": "^3.0.3",
     "@nextcloud/moment": "^1.3.5",
     "@nextcloud/router": "^3.1.0",
-    "@nextcloud/vue": "^8.35.2",
+    "@nextcloud/vue": "^9.0.1",
     "debounce": "^3.0.0",
     "markdown-it": "^14.1.0",
     "p-queue": "^9.1.0",
     "qrcode": "^1.5.4",
     "v-click-outside": "^3.2.0",
-    "vue": "^2.7.16",
+    "vue": "^3.5.22",
     "vue-material-design-icons": "^5.3.1",
-    "vue-router": "^3.6.5",
-    "vuedraggable": "^2.24.3"
+    "vue-router": "^4.6.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@mdi/js": "^7.4.47",
@@ -58,9 +58,10 @@
     "@nextcloud/eslint-config": "^9.0.0-rc.6",
     "@nextcloud/prettier-config": "^1.2.0",
     "@nextcloud/stylelint-config": "^3.1.1",
-    "@nextcloud/vite-config": "^1.7.2",
+    "@nextcloud/vite-config": "^2.5.1",
     "@playwright/test": "^1.57.0",
     "@vue/tsconfig": "^0.5.1",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "prettier": "^3.7.4",
     "vite": "^7.3.1"
diff --git a/src/Forms.vue b/src/Forms.vue
@@ -118,19 +118,19 @@
 		<!-- No errors show router content -->
 		<template v-else>
 			<router-view
-				:form.sync="selectedForm"
-				:sidebar-opened.sync="sidebarOpened"
+				v-model:form="selectedForm"
+				v-model:sidebar-opened="sidebarOpened"
 				@open-sharing="openSharing" />
 			<Sidebar
 				v-if="!selectedForm.partial && canEdit"
-				:form="selectedForm"
-				:sidebar-opened.sync="sidebarOpened"
-				:active.sync="sidebarActive" />
+				v-model:sidebar-opened="sidebarOpened"
+				v-model:active="sidebarActive"
+				:form="selectedForm" />
 		</template>
 
 		<!-- Archived forms modal -->
 		<ArchivedFormsModal
-			:open.sync="showArchivedForms"
+			v-model:open="showArchivedForms"
 			:forms="archivedForms"
 			@clone="onCloneForm" />
 	</NcContent>
@@ -292,15 +292,15 @@ export default {
 					(search) => search.hash === this.routeHash,
 				)
 				if (index > -1) {
-					this.$set(this.forms, index, form)
+					this.forms[index] = form
 					return
 				}
 				// Otherwise a shared form
 				index = this.allSharedForms.findIndex(
 					(search) => search.hash === this.routeHash,
 				)
 				if (index > -1) {
-					this.$set(this.allSharedForms, index, form)
+					this.allSharedForms[index] = form
 				}
 			},
 		},
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
@@ -92,7 +92,7 @@
 				{{ t('forms', 'Delete form') }}
 			</NcActionButton>
 			<NcDialog
-				:open.sync="showDeleteDialog"
+				v-model:open="showDeleteDialog"
 				:name="t('forms', 'Delete form')"
 				:message="
 					t('forms', 'Are you sure you want to delete {title}?', {
@@ -327,11 +327,10 @@ export default {
 						},
 					},
 				)
-				this.$set(
-					this.form,
-					'state',
-					this.isArchived ? FormState.FormClosed : FormState.FormArchived,
-				)
+				// eslint-disable-next-line vue/no-mutating-props
+				this.form.state = this.isArchived
+					? FormState.FormClosed
+					: FormState.FormArchived
 			} catch (error) {
 				logger.error('Error changing archived state of form', {
 					error,
diff --git a/src/components/OptionInputDialog.vue b/src/components/OptionInputDialog.vue
@@ -12,7 +12,7 @@
 		size="normal"
 		@update:open="$emit('update:open', $event)">
 		<NcTextArea
-			v-model="enteredOptions"
+			v-model:value="enteredOptions"
 			:label="t('forms', 'Add multiple options (one per line)')"
 			:placeholder="t('forms', 'Add multiple options (one per line)')"
 			resize="vertical"
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
@@ -216,7 +216,8 @@ export default {
 
 				if (this.answer.local) {
 					// Dispatched for creation. Marked as synced
-					this.$set(this.answer, 'local', false)
+					// eslint-disable-next-line vue/no-mutating-props
+					this.answer.local = false
 					const newAnswer = await this.createAnswer(answer)
 
 					// Forward changes, but use current answer.text to avoid erasing
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
@@ -83,7 +83,7 @@
 
 		<!-- Add multiple options modal -->
 		<OptionInputDialog
-			:open.sync="isOptionDialogShown"
+			v-model:open="isOptionDialogShown"
 			@multiple-answers="handleMultipleOptions" />
 	</Question>
 </template>
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
@@ -172,7 +172,7 @@
 
 		<!-- Add multiple options modal -->
 		<OptionInputDialog
-			:open.sync="isOptionDialogShown"
+			v-model:open="isOptionDialogShown"
 			@multiple-answers="handleMultipleOptions" />
 	</Question>
 </template>
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
@@ -33,13 +33,13 @@
 			<NcActions
 				v-if="!readOnly"
 				:id="validationTypeMenuId"
+				v-model:open="isValidationTypeMenuOpen"
 				:aria-label="
 					t('forms', 'Input types (currently: {type})', {
 						type: validationObject.label,
 					})
 				"
 				:container="`#${validationTypeMenuId}`"
-				:open.sync="isValidationTypeMenuOpen"
 				class="validation-type-menu__toggle"
 				variant="tertiary-no-background">
 				<template #icon>
diff --git a/src/components/SidebarTabs/TransferOwnership.vue b/src/components/SidebarTabs/TransferOwnership.vue
@@ -18,7 +18,7 @@
 		</NcButton>
 
 		<NcDialog
-			:open.sync="showModal"
+			v-model:open="showModal"
 			content-classes="modal-content"
 			:name="t('forms', 'Transfer ownership')"
 			out-transition
@@ -69,7 +69,7 @@
 					" />
 				<!-- eslint-enable vue/no-v-html -->
 				<NcTextField
-					v-model="confirmationInput"
+					v-model:value="confirmationInput"
 					:label="t('forms', 'Confirmation text')"
 					:success="confirmationInput === confirmationString" />
 
diff --git a/src/emptyContent.js b/src/emptyContent.js
@@ -3,16 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import FormsEmptyContent from './FormsEmptyContent.vue'
 
 import 'vite/modulepreload-polyfill'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
-export default new Vue({
-	el: '#content',
-	name: 'FormsEmptyContent',
-	render: (h) => h(FormsEmptyContent),
-})
+const app = createApp(FormsEmptyContent)
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
+app.mount('#content')
diff --git a/src/main.js b/src/main.js
@@ -4,19 +4,18 @@
  */
 
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import Forms from './Forms.vue'
 import router from './router.js'
 
 import 'vite/modulepreload-polyfill'
 import '@nextcloud/dialogs/style.css'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
+const app = createApp(Forms)
 
-export default new Vue({
-	el: '#content',
-	name: 'FormsRoot',
-	router,
-	render: (h) => h(Forms),
-})
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
+
+app.use(router)
+
+app.mount('#content')
diff --git a/src/router.js b/src/router.js
@@ -4,56 +4,44 @@
  */
 
 import { generateUrl } from '@nextcloud/router'
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import Create from './views/Create.vue'
 import Results from './views/Results.vue'
 import Submit from './views/Submit.vue'
 
-Vue.use(Router)
+const routes = [
+	{
+		path: '/',
+		name: 'root',
+	},
+	{
+		path: '/:hash',
+		redirect: { name: 'submit' },
+		name: 'formRoot',
+		props: true,
+	},
+	{
+		path: '/:hash/edit',
+		component: Create,
+		name: 'edit',
+		props: true,
+	},
+	{
+		path: '/:hash/results',
+		component: Results,
+		name: 'results',
+		props: true,
+	},
+	{
+		path: '/:hash/submit/:submissionId?',
+		component: Submit,
+		name: 'submit',
+		props: true,
+	},
+]
 
-export default new Router({
-	mode: 'history',
-
-	// if index.php is in the url AND we got this far, then it's working:
-	// let's keep using index.php in the url
-	base: generateUrl('/apps/forms', ''),
+export default createRouter({
+	history: createWebHistory(generateUrl('/apps/forms', '')),
 	linkActiveClass: 'active',
-
-	routes: [
-		{
-			path: '/',
-			name: 'root',
-		},
-		{
-			path: '/:hash',
-			redirect: { name: 'submit' },
-			name: 'formRoot',
-			props: true,
-		},
-		{
-			path: '/:hash/edit',
-			components: {
-				default: Create,
-			},
-			name: 'edit',
-			props: { default: true },
-		},
-		{
-			path: '/:hash/results',
-			components: {
-				default: Results,
-			},
-			name: 'results',
-			props: { default: true },
-		},
-		{
-			path: '/:hash/submit/:submissionId?',
-			components: {
-				default: Submit,
-			},
-			name: 'submit',
-			props: { default: true },
-		},
-	],
+	routes,
 })
diff --git a/src/settings.js b/src/settings.js
@@ -4,16 +4,12 @@
  */
 
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import FormsSettings from './FormsSettings.vue'
 
 import 'vite/modulepreload-polyfill'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
-export default new Vue({
-	el: '#forms-settings',
-	name: 'FormsSettings',
-	render: (h) => h(FormsSettings),
-})
+const app = createApp(FormsSettings)
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
+app.mount('#forms-settings')
diff --git a/src/submit.js b/src/submit.js
@@ -4,16 +4,12 @@
  */
 
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import FormsSubmitRoot from './FormsSubmit.vue'
 
 import 'vite/modulepreload-polyfill'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
-export default new Vue({
-	el: '#content',
-	name: 'FormsSubmitRoot',
-	render: (h) => h(FormsSubmitRoot),
-})
+const app = createApp(FormsSubmitRoot)
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
+app.mount('#content')
diff --git a/src/views/Create.vue b/src/views/Create.vue
diff --git a/src/views/Results.vue b/src/views/Results.vue
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
