get deck to build with vue3 with broken functionality

Signed-off-by: grnd-alt <github@belakkaf.net>

src/components/card/CommentForm.vue

@@ -2,8 +2,13 @@
   - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-
 <template>
+	<div>
+		THIS HAS AT
+	</div>
+</template>
+
+<!-- <template>
 	<div class="comment-form">
 		<form @submit.prevent="submit">
 			<At ref="at"
@@ -191,4 +196,4 @@ export default {
 	.atwho-li--avatar {
 		margin-right: 10px;
 	}
-</style>
+</style> -->

src/main.js

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router.js'
 import store from './store/main.js'
@@ -20,21 +20,25 @@ document.body.setAttribute('data-snap-ignore', 'true')
 
 sync(store, router)
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
+const app = createApp(App)
 
-Vue.directive('click-outside', ClickOutside)
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
 
-Vue.directive('focus', {
-	inserted(el) {
+app.directive('click-outside', ClickOutside)
+
+app.directive('focus', {
+	mounted(el) {
 		el.focus()
 	},
 })
 
-Vue.config.errorHandler = (err, vm, info) => {
+app.config.errorHandler = (err, vm, info) => {
 	if (err.response && err.response.data.message) {
-		const errorMessage = t('deck', 'Something went wrong')
-		showError(`${errorMessage}: ${err.response.data.status} ${err.response.data.message}`)
+		const errorMessage = translate('deck', 'Something went wrong')
+		showError(
+			`${errorMessage}: ${err.response.data.status} ${err.response.data.message}`,
+		)
 	}
 	console.error(err)
 }
@@ -47,16 +51,14 @@ window.addEventListener('DOMContentLoaded', () => {
 		window.OCA.Files = {}
 	}
 	// register unused client for the sidebar to have access to its parser methods
-	Object.assign(window.OCA.Files, { App: { fileList: { filesClient: OC.Files.getClient() } } }, window.OCA.Files)
+	Object.assign(
+		window.OCA.Files,
+		{ App: { fileList: { filesClient: OC.Files.getClient() } } },
+		window.OCA.Files,
+	)
 })
 
-/* eslint-disable-next-line no-new */
-new Vue({
-	el: '#content',
-	// eslint-disable-next-line vue/match-component-file-name
-	name: 'Deck',
-	router,
-	store,
+app.mixin({
 	data() {
 		return {
 			time: Date.now(),
@@ -75,7 +77,7 @@ new Vue({
 			this.time = Date.now()
 		}, 1000)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.interval)
 	},
 	methods: {
@@ -86,9 +88,12 @@ new Vue({
 			this.$store.commit('setSearchQuery', '')
 		},
 	},
-	render: h => h(App),
 })
 
+app.use(router)
+app.use(store)
+app.mount('#content')
+
 if (!window.OCA.Deck) {
 	window.OCA.Deck = {}
 }

src/router.js

@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import { generateUrl, getRootUrl } from '@nextcloud/router'
 import { BOARD_FILTERS } from './store/main.js'
 import Boards from './components/boards/Boards.vue'
@@ -14,7 +13,6 @@ import BoardSidebar from './components/board/BoardSidebar.vue'
 import CardSidebar from './components/card/CardSidebar.vue'
 import Overview from './components/overview/Overview.vue'
 
-Vue.use(Router)
 
 // We apply a dynamic base URL depending on the URL used in the browser
 const baseUrl = generateUrl('/apps/deck/')
@@ -22,9 +20,8 @@ const webRootWithIndexPHP = getRootUrl() + '/index.php'
 const doesURLContainIndexPHP = window.location.pathname.startsWith(webRootWithIndexPHP)
 const currentBaseUrl = doesURLContainIndexPHP ? baseUrl : baseUrl.replace('/index.php/', '/')
 
-const router = new Router({
-	mode: 'history',
-	base: currentBaseUrl,
+const router = createRouter({
+	history: createWebHistory(currentBaseUrl),
 	linkActiveClass: 'active',
 	routes: [
 		{

src/store/main.js

@@ -7,7 +7,7 @@ import 'url-search-params-polyfill'
 
 import { loadState } from '@nextcloud/initial-state'
 import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { BoardApi } from '../services/BoardApi.js'
@@ -18,7 +18,6 @@ import comment from './comment.js'
 import trashbin from './trashbin.js'
 import attachment from './attachment.js'
 import overview from './overview.js'
-Vue.use(Vuex)
 
 const apiClient = new BoardApi()
 const debug = process.env.NODE_ENV !== 'production'
@@ -29,7 +28,8 @@ export const BOARD_FILTERS = {
 	SHARED: 'shared',
 }
 
-export default new Vuex.Store({
+
+const store = createStore({
 	modules: {
 		actions,
 		stack,
@@ -531,3 +531,5 @@ export default new Vuex.Store({
 		},
 	},
 })
+
+export default store