diff --git a/src/mainFilesSidebarLoader.js b/src/mainFilesSidebarLoader.js
index 55b32413111..efb70046788 100644
--- a/src/mainFilesSidebarLoader.js
+++ b/src/mainFilesSidebarLoader.js
@@ -21,7 +21,6 @@
  */
 
 import FilesSidebarCallView from './views/FilesSidebarCallView'
-import FilesSidebarTab from './views/FilesSidebarTab'
 import { leaveConversation } from './services/participantsService'
 
 const isEnabled = function(fileInfo) {
@@ -46,9 +45,45 @@ const isEnabled = function(fileInfo) {
 	return false
 }
 
+// It might be enough to keep the instance only in the Tab object itself,
+// without using a shared variable that can be destroyed if a new tab is
+// mounted and the previous one was not destroyed yet, as the tabs seem to
+// always be properly destroyed. However, this is how it is done for tabs in
+// server, so it is done here too just to be safe.
+let tabInstance = null
+
 window.addEventListener('DOMContentLoaded', () => {
 	if (OCA.Files && OCA.Files.Sidebar) {
 		OCA.Files.Sidebar.registerSecondaryView(new FilesSidebarCallView())
-		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab('tab-chat', FilesSidebarTab, isEnabled))
+		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
+			id: 'chat',
+			name: t('spreed', 'Chat'),
+			icon: 'icon-talk',
+			enabled: isEnabled,
+
+			async mount(el, fileInfo, context) {
+				if (tabInstance) {
+					tabInstance.$destroy()
+				}
+
+				// Dirty hack to force the style on parent component
+				const tabChat = document.querySelector('#tab-chat')
+				tabChat.style.height = '100%'
+				// Remove paddding to maximize space for the chat view
+				tabChat.style.padding = '0'
+
+				OCA.Talk.fileInfo = this.fileInfo
+				tabInstance = OCA.Talk.newTab()
+				tabInstance.$mount(el)
+			},
+			update(fileInfo) {
+				OCA.Talk.fileInfo = fileInfo
+			},
+			destroy() {
+				OCA.Talk.fileInfo = null
+				tabInstance.$destroy()
+				tabInstance = null
+			},
+		}))
 	}
 })
diff --git a/src/views/FilesSidebarTab.vue b/src/views/FilesSidebarTab.vue
deleted file mode 100644
index bc9ec599021..00000000000
--- a/src/views/FilesSidebarTab.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Marco Ambrosini <smarcoambrosini@pm.me>
-  -
-  - @author Marco Ambrosini <smarcoambrosini@pm.me>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<Tab
-		:id="id"
-		:icon="icon"
-		:name="name"
-		:class="{ 'icon-loading': loading }">
-		<div id="talk-tab-mount" />
-	</Tab>
-</template>
-
-<script>
-import Tab from '@nextcloud/vue/dist/Components/AppSidebarTab'
-
-export default {
-	name: 'FilesSidebarTab',
-	components: {
-		Tab,
-	},
-	props: {
-		// fileInfo will be given by the Sidebar
-		fileInfo: {
-			type: Object,
-			default: () => {},
-			required: true,
-		},
-	},
-	data() {
-		return {
-			icon: 'icon-talk',
-			loading: false,
-			name: t('spreed', 'Chat'),
-			tab: null,
-			token: null,
-		}
-	},
-
-	computed: {
-		/**
-		 * Needed to differenciate the tabs
-		 * pulled from the AppSidebarTab component
-		 *
-		 * @returns {string}
-		 */
-		id() {
-			return 'chat'
-		},
-
-		/**
-		 * Returns the current active tab
-		 * needed because AppSidebarTab also uses $parent.activeTab
-		 *
-		 * @returns {string}
-		 */
-		activeTab() {
-			return this.$parent.activeTab
-		},
-	},
-
-	beforeMount() {
-
-	},
-	mounted() {
-		try {
-			OCA.Talk.fileInfo = this.fileInfo
-			this.tab = OCA.Talk.newTab()
-			this.tab.$mount('#talk-tab-mount')
-		} catch (error) {
-			console.error('Unable to mount Chat tab', error)
-		}
-	},
-	beforeDestroy() {
-		try {
-			OCA.Talk.fileInfo = null
-			this.tab.$destroy()
-		} catch (error) {
-			console.error('Unable to unmount Chat tab', error)
-		}
-	},
-}
-</script>
-
-<style scoped>
-#tab-chat {
-	height: 100%;
-
-	/* Remove padding to maximize the space for the chat view. */
-	padding: 0;
-}
-</style>