feat: migrate to vue3

package.json

@@ -28,31 +28,31 @@
 		"extends @nextcloud/browserslist-config"
 	],
 	"dependencies": {
-		"@nextcloud/auth": "^2.4.0",
-		"@nextcloud/axios": "^2.5.1",
-		"@nextcloud/dialogs": "^6.1.1",
-		"@nextcloud/event-bus": "^3.3.2",
-		"@nextcloud/files": "^3.10.2",
-		"@nextcloud/initial-state": "^2.2.0",
-		"@nextcloud/l10n": "^3.2.0",
-		"@nextcloud/moment": "^1.3.2",
-		"@nextcloud/password-confirmation": "^5.3.1",
-		"@nextcloud/router": "^3.0.1",
-		"@nextcloud/vue": "^8.26.1",
-		"vue": "^2.7.16",
+		"@nextcloud/auth": "^2.5.3",
+		"@nextcloud/axios": "^2.5.2",
+		"@nextcloud/dialogs": "^7.1.0",
+		"@nextcloud/event-bus": "^3.3.3",
+		"@nextcloud/files": "^3.12.0",
+		"@nextcloud/initial-state": "^3.0.0",
+		"@nextcloud/l10n": "^3.4.1",
+		"@nextcloud/moment": "^1.3.5",
+		"@nextcloud/password-confirmation": "^6.0.2",
+		"@nextcloud/router": "^3.1.0",
+		"@nextcloud/vue": "^9.3.0",
+		"vue": "^3.5.25",
 		"vue-material-design-icons": "^5.3.1"
 	},
 	"engines": {
-		"node": "^20.0.0",
-		"npm": "^9.6.4"
+		"node": "^22",
+		"npm": "^10.9"
 	},
 	"devDependencies": {
-		"@nextcloud/babel-config": "^1.2.0",
-		"@nextcloud/browserslist-config": "^3.0.1",
+		"@nextcloud/babel-config": "^1.3.0",
+		"@nextcloud/browserslist-config": "^3.1.2",
 		"@nextcloud/eslint-config": "^8.4.2",
-		"@nextcloud/stylelint-config": "^3.0.1",
-		"@nextcloud/webpack-vue-config": "^6.2.0",
-		"eslint-webpack-plugin": "^5.0.0",
+		"@nextcloud/stylelint-config": "^3.1.1",
+		"@nextcloud/webpack-vue-config": "^7.0.2",
+		"eslint-webpack-plugin": "^5.0.2",
 		"stylelint-webpack-plugin": "^5.0.1"
 	}
 }

src/adminSettings.js

@@ -13,9 +13,9 @@
  * @copyright Anupam Kumar 2023
  */
 
-import Vue from 'vue'
-import './bootstrap.js'
+import { createApp } from 'vue'
 import AdminSettings from './components/AdminSettings.vue'
 
-const VueAdminSettings = Vue.extend(AdminSettings)
-new VueAdminSettings().$mount('#slack_prefs')
+const app = createApp(AdminSettings)
+app.mixin({ methods: { t, n } })
+app.mount('#slack_prefs')

src/components/AdminSettings.vue

@@ -54,8 +54,8 @@
 			</div>
 			<div class="line slack-checkbox">
 				<NcCheckboxRadioSwitch
-					:checked.sync="state.use_popup"
-					@update:checked="onUsePopupChanged">
+					v-model="state.use_popup"
+					@update:model-value="onUsePopupChanged">
 					{{ t('integration_slack', 'Use a popup to authenticate') }}
 				</NcCheckboxRadioSwitch>
 			</div>
@@ -75,7 +75,7 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import { generateUrl } from '@nextcloud/router'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 
 import { delay } from '../utils.js'
 

src/components/PersonalSettings.vue

@@ -37,8 +37,8 @@
 			</div>
 			<br>
 			<NcCheckboxRadioSwitch
-				:checked.sync="state.file_action_enabled"
-				@update:checked="onCheckboxChanged($event, 'file_action_enabled')">
+				v-model="state.file_action_enabled"
+				@update:model-value="onCheckboxChanged($event, 'file_action_enabled')">
 				{{ t('integration_slack', 'Add file action to send files to Slack') }}
 			</NcCheckboxRadioSwitch>
 		</div>
@@ -51,9 +51,9 @@ import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 
 import SlackIcon from './icons/SlackIcon.vue'
 
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'