Fix imports

Signed-off-by: Joas Schilling <coding@schilljs.com>

78 files changed, 275 insertions, 279 deletions

diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue
index 5052c679c..cb6c6219f 100644
--- a/src/components/AdminSettings/AllowedGroups.vue
+++ b/src/components/AdminSettings/AllowedGroups.vue
@@ -101,12 +101,12 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 const startCallOptions = [
 	{ value: 0, label: t('spreed', 'Everyone') },
diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue
index 84a6b8add..a58950cf8 100644
--- a/src/components/AdminSettings/GeneralSettings.vue
+++ b/src/components/AdminSettings/GeneralSettings.vue
@@ -58,8 +58,8 @@
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
 import { loadState } from '@nextcloud/initial-state'
 
 const defaultGroupNotificationOptions = [
diff --git a/src/components/AdminSettings/HostedSignalingServer.vue b/src/components/AdminSettings/HostedSignalingServer.vue
index bf24f8855..537d7afe8 100644
--- a/src/components/AdminSettings/HostedSignalingServer.vue
+++ b/src/components/AdminSettings/HostedSignalingServer.vue
@@ -132,7 +132,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
diff --git a/src/components/AdminSettings/MatterbridgeIntegration.vue b/src/components/AdminSettings/MatterbridgeIntegration.vue
index f06881793..9074cd718 100644
--- a/src/components/AdminSettings/MatterbridgeIntegration.vue
+++ b/src/components/AdminSettings/MatterbridgeIntegration.vue
@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import {
diff --git a/src/components/AdminSettings/SIPBridge.vue b/src/components/AdminSettings/SIPBridge.vue
index 35bde1284..c642dda43 100644
--- a/src/components/AdminSettings/SIPBridge.vue
+++ b/src/components/AdminSettings/SIPBridge.vue
@@ -83,8 +83,8 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
diff --git a/src/components/AdminSettings/SignalingServer.vue b/src/components/AdminSettings/SignalingServer.vue
index e035abb79..2aa4d0f1f 100644
--- a/src/components/AdminSettings/SignalingServer.vue
+++ b/src/components/AdminSettings/SignalingServer.vue
@@ -52,8 +52,8 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Delete from 'vue-material-design-icons/Delete'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Delete from 'vue-material-design-icons/Delete.vue'
 import { getWelcomeMessage } from '../../services/signalingService.js'
 
 export default {
diff --git a/src/components/AdminSettings/SignalingServers.vue b/src/components/AdminSettings/SignalingServers.vue
index 7d1c7a876..8298e6325 100644
--- a/src/components/AdminSettings/SignalingServers.vue
+++ b/src/components/AdminSettings/SignalingServers.vue
@@ -86,8 +86,8 @@
 
 <script>
 import SignalingServer from '../../components/AdminSettings/SignalingServer.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Plus from 'vue-material-design-icons/Plus'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
 import { showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import debounce from 'debounce'
diff --git a/src/components/AdminSettings/StunServer.vue b/src/components/AdminSettings/StunServer.vue
index e04261793..e54dce8ce 100644
--- a/src/components/AdminSettings/StunServer.vue
+++ b/src/components/AdminSettings/StunServer.vue
@@ -51,9 +51,9 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import AlertCircle from 'vue-material-design-icons/AlertCircle'
-import Delete from 'vue-material-design-icons/Delete'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
 
 export default {
 	name: 'StunServer',
diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue
index 61e9a8cc5..dc2dcb6ae 100644
--- a/src/components/AdminSettings/StunServers.vue
+++ b/src/components/AdminSettings/StunServers.vue
@@ -56,8 +56,8 @@
 
 <script>
 import StunServer from '../../components/AdminSettings/StunServer.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Plus from 'vue-material-design-icons/Plus'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
 import debounce from 'debounce'
 import { loadState } from '@nextcloud/initial-state'
 import { showSuccess } from '@nextcloud/dialogs'
diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 9526fae11..9b2ec182c 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -96,13 +96,13 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import AlertCircle from 'vue-material-design-icons/AlertCircle'
-import Check from 'vue-material-design-icons/Check'
-import Delete from 'vue-material-design-icons/Delete'
-import hmacSHA1 from 'crypto-js/hmac-sha1'
-import Base64 from 'crypto-js/enc-base64'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import hmacSHA1 from 'crypto-js/hmac-sha1.js'
+import Base64 from 'crypto-js/enc-base64.js'
 import debounce from 'debounce'
 import CategoryMonitoring from '../missingMaterialDesignIcons/CategoryMonitoring.vue'
 
diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue
index 737231e81..7331db37a 100644
--- a/src/components/AdminSettings/TurnServers.vue
+++ b/src/components/AdminSettings/TurnServers.vue
@@ -60,10 +60,10 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import TurnServer from '../../components/AdminSettings/TurnServer.vue'
 import { loadState } from '@nextcloud/initial-state'
-import Plus from 'vue-material-design-icons/Plus'
+import Plus from 'vue-material-design-icons/Plus.vue'
 import { showSuccess } from '@nextcloud/dialogs'
 import debounce from 'debounce'
 
diff --git a/src/components/AdminSettings/WebServerSetupChecks.vue b/src/components/AdminSettings/WebServerSetupChecks.vue
index bfd4d2b8b..47263ca29 100644
--- a/src/components/AdminSettings/WebServerSetupChecks.vue
+++ b/src/components/AdminSettings/WebServerSetupChecks.vue
@@ -50,10 +50,10 @@
 </template>
 
 <script>
-import AlertCircle from 'vue-material-design-icons/AlertCircle'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Check from 'vue-material-design-icons/Check'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Check from 'vue-material-design-icons/Check.vue'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import JitsiStreamBackgroundEffect from '../../utils/media/effects/virtual-background/JitsiStreamBackgroundEffect.js'
 import VirtualBackground from '../../utils/media/pipeline/VirtualBackground.js'
 
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 3b66086d7..410614463 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
 
 export default {
 
diff --git a/src/components/AvatarWrapper/AvatarWrapperSmall.vue b/src/components/AvatarWrapper/AvatarWrapperSmall.vue
index 3dc287469..2fff264d0 100644
--- a/src/components/AvatarWrapper/AvatarWrapperSmall.vue
+++ b/src/components/AvatarWrapper/AvatarWrapperSmall.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
 
 export default {
 
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 6b70f02bd..aeccf78ff 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -152,11 +152,11 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { generateFilePath } from '@nextcloud/router'
 import EmptyCallView from '../shared/EmptyCallView.vue'
 import VideoBottomBar from '../shared/VideoBottomBar.vue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import ChevronRight from 'vue-material-design-icons/ChevronRight'
-import ChevronLeft from 'vue-material-design-icons/ChevronLeft'
-import ChevronUp from 'vue-material-design-icons/ChevronUp'
-import ChevronDown from 'vue-material-design-icons/ChevronDown'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 
 export default {
 	name: 'Grid',
diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index 2d63f22fc..f1e731b3e 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index 6c9a6d442..226520938 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -231,28 +231,28 @@ import escapeHtml from 'escape-html'
 import { emit } from '@nextcloud/event-bus'
 import { showMessage } from '@nextcloud/dialogs'
 import CancelPresentation from '../../missingMaterialDesignIcons/CancelPresentation.vue'
-import Cog from 'vue-material-design-icons/Cog'
-import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal'
+import Cog from 'vue-material-design-icons/Cog.vue'
+import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import GridView from '../../missingMaterialDesignIcons/GridView.vue'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft'
-import Microphone from 'vue-material-design-icons/Microphone'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
-import Monitor from 'vue-material-design-icons/Monitor'
+import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
+import Microphone from 'vue-material-design-icons/Microphone.vue'
+import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import Monitor from 'vue-material-design-icons/Monitor.vue'
 import PresentToAll from '../../missingMaterialDesignIcons/PresentToAll.vue'
 import PromotedView from '../../missingMaterialDesignIcons/PromotedView.vue'
-import Video from 'vue-material-design-icons/Video'
-import VideoOff from 'vue-material-design-icons/VideoOff'
-import Blur from 'vue-material-design-icons/Blur'
-import BlurOff from 'vue-material-design-icons/BlurOff'
-import Popover from '@nextcloud/vue/dist/Components/Popover'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Video from 'vue-material-design-icons/Video.vue'
+import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import Blur from 'vue-material-design-icons/Blur.vue'
+import BlurOff from 'vue-material-design-icons/BlurOff.vue'
+import Popover from '@nextcloud/vue/dist/Components/Popover.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { PARTICIPANT } from '../../../constants.js'
 import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner.js'
-import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
+import Actions from '@nextcloud/vue/dist/Components/Actions.js'
+import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
 import { callAnalyzer } from '../../../utils/webrtc/index.js'
 import { CONNECTION_QUALITY } from '../../../utils/webrtc/analyzers/PeerConnectionAnalyzer.js'
 import isInCall from '../../../mixins/isInCall.js'
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 95575361e..770612c06 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -66,9 +66,9 @@
 
 <script>
 import attachMediaStream from 'attachmediastream'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import Hex from 'crypto-js/enc-hex'
-import SHA1 from 'crypto-js/sha1'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import Hex from 'crypto-js/enc-hex.js'
+import SHA1 from 'crypto-js/sha1.js'
 import {
 	showError,
 	showInfo,
diff --git a/src/components/CallView/shared/Screen.vue b/src/components/CallView/shared/Screen.vue
index 07ad03c84..8f03177fc 100644
--- a/src/components/CallView/shared/Screen.vue
+++ b/src/components/CallView/shared/Screen.vue
@@ -36,8 +36,8 @@
 
 <script>
 import attachMediaStream from 'attachmediastream'
-import SHA1 from 'crypto-js/sha1'
-import Hex from 'crypto-js/enc-hex'
+import SHA1 from 'crypto-js/sha1.js'
+import Hex from 'crypto-js/enc-hex.js'
 import VideoBottomBar from './VideoBottomBar.vue'
 
 export default {
diff --git a/src/components/CallView/shared/Video.vue b/src/components/CallView/shared/Video.vue
index 73f24decd..7c7cf9de3 100644
--- a/src/components/CallView/shared/Video.vue
+++ b/src/components/CallView/shared/Video.vue
@@ -89,13 +89,13 @@
 
 <script>
 import attachMediaStream from 'attachmediastream'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
-import SHA1 from 'crypto-js/sha1'
-import Hex from 'crypto-js/enc-hex'
+import SHA1 from 'crypto-js/sha1.js'
+import Hex from 'crypto-js/enc-hex.js'
 import video from '../../../mixins/video.js'
 import VideoBackground from './VideoBackground.vue'
-import AccountCircle from 'vue-material-design-icons/AccountCircle'
+import AccountCircle from 'vue-material-design-icons/AccountCircle.vue'
 import VideoBottomBar from './VideoBottomBar.vue'
 import Screen from './Screen.vue'
 import { EventBus } from '../../../services/EventBus.js'
diff --git a/src/components/CallView/shared/VideoBackground.vue b/src/components/CallView/shared/VideoBackground.vue
index 7025c5c03..309fc1693 100644
--- a/src/components/CallView/shared/VideoBackground.vue
+++ b/src/components/CallView/shared/VideoBackground.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor'
+import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
 
 export default {
 	name: 'VideoBackground',
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 751f15af3..1de57d971 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -96,15 +96,15 @@
 
 <script>
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import AlertCircle from 'vue-material-design-icons/AlertCircle'
-import Microphone from 'vue-material-design-icons/Microphone'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
-import Monitor from 'vue-material-design-icons/Monitor'
-import Video from 'vue-material-design-icons/Video'
-import VideoOff from 'vue-material-design-icons/VideoOff'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import Microphone from 'vue-material-design-icons/Microphone.vue'
+import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import Monitor from 'vue-material-design-icons/Monitor.vue'
+import Video from 'vue-material-design-icons/Video.vue'
+import VideoOff from 'vue-material-design-icons/VideoOff.vue'
 import { PARTICIPANT } from '../../../constants.js'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft'
+import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import { emit } from '@nextcloud/event-bus'
 
 export default {
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index cbee8980c..d313bd3f6 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -51,9 +51,9 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import Star from 'vue-material-design-icons/Star'
-import Video from 'vue-material-design-icons/Video'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import Star from 'vue-material-design-icons/Star.vue'
+import Video from 'vue-material-design-icons/Video.vue'
 import { CONVERSATION } from '../constants.js'
 
 export default {
diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
index cdd95b587..d9372d0a5 100644
--- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue
+++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -86,8 +86,8 @@
 
 <script>
 import PermissionEditor from '../PermissionsEditor/PermissionsEditor.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import { PARTICIPANT } from '../../constants.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 8ffe2c905..835d52170 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -105,8 +105,8 @@
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { PARTICIPANT, CONVERSATION } from '../../constants.js'
-import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog'
-import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection'
+import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog.js'
+import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection.js'
 import ExpirationSettings from './ExpirationSettings.vue'
 import LinkShareSettings from './LinkShareSettings.vue'
 import ListableSettings from './ListableSettings.vue'
@@ -119,7 +119,7 @@ import DangerZone from './DangerZone.vue'
 import NotificationsSettings from './NotificationsSettings.vue'
 import { showError } from '@nextcloud/dialogs'
 import Description from '../Description/Description.vue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import ConversationPermissionsSettings from './ConversationPermissionsSettings.vue'
 
diff --git a/src/components/ConversationSettings/DangerZone.vue b/src/components/ConversationSettings/DangerZone.vue
index 18ecc2168..78c7c13c3 100644
--- a/src/components/ConversationSettings/DangerZone.vue
+++ b/src/components/ConversationSettings/DangerZone.vue
@@ -64,7 +64,7 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'DangerZone',
diff --git a/src/components/ConversationSettings/ExpirationSettings.vue b/src/components/ConversationSettings/ExpirationSettings.vue
index 26aebc658..bcfb5c347 100644
--- a/src/components/ConversationSettings/ExpirationSettings.vue
+++ b/src/components/ConversationSettings/ExpirationSettings.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
 export default {
diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue
index 819fdb44a..7b427024e 100644
--- a/src/components/ConversationSettings/LinkShareSettings.vue
+++ b/src/components/ConversationSettings/LinkShareSettings.vue
@@ -106,16 +106,16 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { CONVERSATION } from '../../constants.js'
 import {
 	setConversationPassword,
 } from '../../services/conversationsService.js'
 import { generateUrl } from '@nextcloud/router'
-import ArrowRight from 'vue-material-design-icons/ArrowRight'
-import ClipboardTextOutline from 'vue-material-design-icons/ClipboardTextOutline'
-import Email from 'vue-material-design-icons/Email'
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import ClipboardTextOutline from 'vue-material-design-icons/ClipboardTextOutline.vue'
+import Email from 'vue-material-design-icons/Email.vue'
 
 export default {
 	name: 'LinkShareSettings',
diff --git a/src/components/ConversationSettings/LobbySettings.vue b/src/components/ConversationSettings/LobbySettings.vue
index 255e1785a..a808c7e95 100644
--- a/src/components/ConversationSettings/LobbySettings.vue
+++ b/src/components/ConversationSettings/LobbySettings.vue
@@ -70,7 +70,7 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { WEBINAR } from '../../constants.js'
-import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
+import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker.js'
 
 export default {
 	name: 'LobbySettings',
diff --git a/src/components/ConversationSettings/Matterbridge/BridgePart.vue b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
index 80aefd666..f912673ee 100644
--- a/src/components/ConversationSettings/Matterbridge/BridgePart.vue
+++ b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
@@ -88,9 +88,9 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
+import Actions from '@nextcloud/vue/dist/Components/Actions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js'
 
 export default {
 	name: 'BridgePart',
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index acb2af4cd..86f922fb2 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -106,15 +106,15 @@ import {
 } from '../../../services/matterbridgeService.js'
 import { showSuccess } from '@nextcloud/dialogs'
 import { imagePath } from '@nextcloud/router'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
-import Message from 'vue-material-design-icons/Message'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Plus from 'vue-material-design-icons/Plus'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import Message from 'vue-material-design-icons/Message.vue'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
 import BridgePart from './BridgePart.vue'
 
 import Vue from 'vue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 Vue.directive('tooltip', Tooltip)
 
 export default {
diff --git a/src/components/ConversationSettings/NotificationsSettings.vue b/src/components/ConversationSettings/NotificationsSettings.vue
index 89af3722f..93f64651f 100644
--- a/src/components/ConversationSettings/NotificationsSettings.vue
+++ b/src/components/ConversationSettings/NotificationsSettings.vue
@@ -73,11 +73,11 @@
 
 <script>
 import { PARTICIPANT } from '../../constants.js'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import VolumeHigh from 'vue-material-design-icons/VolumeHigh'
-import Account from 'vue-material-design-icons/Account'
-import VolumeOff from 'vue-material-design-icons/VolumeOff'
-import Check from 'vue-material-design-icons/Check'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
+import Account from 'vue-material-design-icons/Account.vue'
+import VolumeOff from 'vue-material-design-icons/VolumeOff.vue'
+import Check from 'vue-material-design-icons/Check.vue'
 
 export default {
 	name: 'NotificationsSettings',
diff --git a/src/components/ConversationsOptionsList.vue b/src/components/ConversationsOptionsList.vue
index 615eca9ba..ea8f617c8 100644
--- a/src/components/ConversationsOptionsList.vue
+++ b/src/components/ConversationsOptionsList.vue
@@ -35,7 +35,7 @@
 
 <script>
 import ConversationIcon from './ConversationIcon.vue'
-import ListItem from '@nextcloud/vue/dist/Components/ListItem'
+import ListItem from '@nextcloud/vue/dist/Components/ListItem.js'
 import { CONVERSATION } from '../constants.js'
 
 export default {
diff --git a/src/components/Description/Description.vue b/src/components/Description/Description.vue
index fc0bf9cb4..c30481715 100644
--- a/src/components/Description/Description.vue
+++ b/src/components/Description/Description.vue
@@ -72,12 +72,12 @@
 </template>
 
 <script>
-import Pencil from 'vue-material-design-icons/Pencil'
-import Check from 'vue-material-design-icons/Check'
-import Close from 'vue-material-design-icons/Close'
-import RichContentEditable from '@nextcloud/vue/dist/Components/RichContenteditable'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+import RichContentEditable from '@nextcloud/vue/dist/Components/RichContenteditable.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'Description',
diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index 27f8ddfee..8c44149ba 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -169,29 +169,29 @@
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
 import { devices } from '../../mixins/devices.js'
 import MediaDevicesSelector from '../MediaDevicesSelector.vue'
 import VideoBackground from '../CallView/shared/VideoBackground.vue'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
 import Cog from 'vue-material-design-icons/Cog.vue'
-import Microphone from 'vue-material-design-icons/Microphone'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
-import Video from 'vue-material-design-icons/Video'
-import VideoOff from 'vue-material-design-icons/VideoOff'
-import Blur from 'vue-material-design-icons/Blur'
-import BlurOff from 'vue-material-design-icons/BlurOff'
-import BellOff from 'vue-material-design-icons/BellOff'
+import Microphone from 'vue-material-design-icons/Microphone.vue'
+import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import Video from 'vue-material-design-icons/Video.vue'
+import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import Blur from 'vue-material-design-icons/Blur.vue'
+import BlurOff from 'vue-material-design-icons/BlurOff.vue'
+import BellOff from 'vue-material-design-icons/BellOff.vue'
 import Bell from 'vue-material-design-icons/Bell.vue'
 import { localMediaModel } from '../../utils/webrtc/index.js'
 import CallButton from '../TopBar/CallButton.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Actions from '@nextcloud/vue/dist/Components/Actions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
 import isInLobby from '../../mixins/isInLobby.js'
 
 export default {
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
index 86bbf79a4..8a8f7fc17 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
@@ -4,7 +4,7 @@ import { createLocalVue, shallowMount, mount, RouterLinkStub } from '@vue/test-u
 import { cloneDeep } from 'lodash'
 import storeConfig from '../../../store/storeConfig.js'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../constants.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 
 import Conversation from './Conversation.vue'
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index fc6932361..8e0862b5d 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -93,16 +93,16 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import Cog from 'vue-material-design-icons/Cog'
-import Delete from 'vue-material-design-icons/Delete'
-import EyeOutline from 'vue-material-design-icons/EyeOutline'
-import Star from 'vue-material-design-icons/Star'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import Cog from 'vue-material-design-icons/Cog.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
+import Star from 'vue-material-design-icons/Star.vue'
 import ConversationIcon from './../../ConversationIcon.vue'
 import { generateUrl } from '@nextcloud/router'
 import { emit } from '@nextcloud/event-bus'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../constants.js'
-import ListItem from '@nextcloud/vue/dist/Components/ListItem'
+import ListItem from '@nextcloud/vue/dist/Components/ListItem.js'
 
 export default {
 	name: 'Conversation',
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index faf22b300..34ceddfc0 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -116,13 +116,13 @@
 
 <script>
 import CancelableRequest from '../../utils/cancelableRequest.js'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation.js'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js'
 import ConversationsList from './ConversationsList/ConversationsList.vue'
 import Conversation from './ConversationsList/Conversation.vue'
 import ConversationsOptionsList from '../ConversationsOptionsList.vue'
 import Hint from '../Hint.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import SearchBox from './SearchBox/SearchBox.vue'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus.js'
diff --git a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
index c8fd15754..09e33e4dd 100644
--- a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'Confirmation',
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index a3feb5b25..80ca7be25 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -118,13 +118,13 @@
 <script>
 
 import { CONVERSATION } from '../../../constants.js'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Plus from 'vue-material-design-icons/Plus'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
 import SetConversationName from './SetConversationName/SetConversationName.vue'
 import SetConversationType from './SetConversationType/SetConversationType.vue'
 import Confirmation from './Confirmation/Confirmation.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import { addParticipant } from '../../../services/participantsService.js'
 import {
 	createPublicConversation,
@@ -136,7 +136,7 @@ import PasswordProtect from './PasswordProtect/PasswordProtect.vue'
 import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
 import isInCall from '../../../mixins/isInCall.js'
 import participant from '../../../mixins/participant.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { EventBus } from '../../../services/EventBus.js'
 
 export default {
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
index e507be0ff..7923781d0 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import AvatarWrapperSmall from '../../../../AvatarWrapper/AvatarWrapperSmall.vue'
 export default {
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
index 1e65c0a85..973b898fe 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import CancelableRequest from '../../../../utils/cancelableRequest.js'
 import debounce from 'debounce'
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 0e7dc0d8c..f8169e141 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import { EventBus } from '../../../services/EventBus.js'
 
diff --git a/src/components/MediaDevicesPreview.vue b/src/components/MediaDevicesPreview.vue
index 46e37d755..d1edef350 100644
--- a/src/components/MediaDevicesPreview.vue
+++ b/src/components/MediaDevicesPreview.vue
@@ -85,10 +85,10 @@
 </template>
 
 <script>
-import AlertCircle from 'vue-material-design-icons/AlertCircle'
-import Microphone from 'vue-material-design-icons/Microphone'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
-import VideoOff from 'vue-material-design-icons/VideoOff'
+import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import Microphone from 'vue-material-design-icons/Microphone.vue'
+import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import VideoOff from 'vue-material-design-icons/VideoOff.vue'
 import MediaDevicesSelector from './MediaDevicesSelector.vue'
 import { devices } from '../mixins/devices.js'
 
diff --git a/src/components/MediaDevicesSelector.vue b/src/components/MediaDevicesSelector.vue
index b4e07f28a..cd8aced6f 100644
--- a/src/components/MediaDevicesSelector.vue
+++ b/src/components/MediaDevicesSelector.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
 import Microphone from 'vue-material-design-icons/Microphone.vue'
 import Video from 'vue-material-design-icons/Video.vue'
 
diff --git a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
index c20cf3124..59a9d7e75 100644
--- a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
+++ b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
 import { ATTENDEE } from '../../../constants.js'
 
 export default {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index 4c5aee453..d46f99f01 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -5,11 +5,11 @@ import { cloneDeep } from 'lodash'
 import { EventBus } from '../../../../services/EventBus.js'
 import storeConfig from '../../../../store/storeConfig.js'
 import { CONVERSATION, ATTENDEE, PARTICIPANT } from '../../../../constants.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 // Components
-import Check from 'vue-material-design-icons/Check'
-import CheckAll from 'vue-material-design-icons/CheckAll'
+import Check from 'vue-material-design-icons/Check.vue'
+import CheckAll from 'vue-material-design-icons/CheckAll.vue'
 import Quote from '../../../Quote.vue'
 import Mention from './MessagePart/Mention.vue'
 import FilePreview from './MessagePart/FilePreview.vue'
@@ -18,8 +18,8 @@ import Location from './MessagePart/Location.vue'
 import DefaultParameter from './MessagePart/DefaultParameter.vue'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
 import Message from './Message.vue'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js'
 
 // needed because of https://github.com/vuejs/vue-test-utils/issues/1507
 const RichTextStub = {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 67f7cd634..cff768157 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -172,30 +172,30 @@ the main body of the message as well as a quote.
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import CallButton from '../../../TopBar/CallButton.vue'
 import DeckCard from './MessagePart/DeckCard.vue'
 import DefaultParameter from './MessagePart/DefaultParameter.vue'
 import FilePreview from './MessagePart/FilePreview.vue'
 import Mention from './MessagePart/Mention.vue'
 import RichText from '@juliushaertl/vue-richtext'
-import AlertCircle from 'vue-material-design-icons/AlertCircle'
-import Check from 'vue-material-design-icons/Check'
-import CheckAll from 'vue-material-design-icons/CheckAll'
-import Reload from 'vue-material-design-icons/Reload'
+import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import CheckAll from 'vue-material-design-icons/CheckAll.vue'
+import Reload from 'vue-material-design-icons/Reload.vue'
 import Quote from '../../../Quote.vue'
 import isInCall from '../../../../mixins/isInCall.js'
 import participant from '../../../../mixins/participant.js'
 import { EventBus } from '../../../../services/EventBus.js'
-import emojiRegex from 'emoji-regex'
+import emojiRegex from 'emoji-regex/index.js'
 import moment from '@nextcloud/moment'
 import Location from './MessagePart/Location.vue'
 import Contact from './MessagePart/Contact.vue'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
-import Popover from '@nextcloud/vue/dist/Components/Popover'
+import Popover from '@nextcloud/vue/dist/Components/Popover.js'
 import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
 import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
 import Poll from './MessagePart/Poll.vue'
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue
index 5aff87281..9f649abb1 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue
@@ -57,11 +57,11 @@
 
 <script>
 import RoomSelector from '../../../../../views/RoomSelector.vue'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent.js'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
 import { showError } from '@nextcloud/dialogs'
-import cloneDeep from 'lodash/cloneDeep'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import cloneDeep from 'lodash/cloneDeep.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'Forwarder',
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
index 6316d5ec7..e56524f85 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
@@ -4,7 +4,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { cloneDeep } from 'lodash'
 import storeConfig from '../../../../../store/storeConfig.js'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
 import { findActionButton } from '../../../../../test-helpers.js'
 import MessageButtonsBar from './../MessageButtonsBar/MessageButtonsBar.vue'
 
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 220913d53..68948079e 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -139,13 +139,13 @@
 
 <script>
 import { PARTICIPANT, CONVERSATION, ATTENDEE } from '../../../../../constants.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js'
+import Actions from '@nextcloud/vue/dist/Components/Actions.js'
+import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js'
+import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
-import File from 'vue-material-design-icons/File'
+import File from 'vue-material-design-icons/File.vue'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Reply from 'vue-material-design-icons/Reply.vue'
@@ -158,8 +158,8 @@ import {
 	showSuccess,
 } from '@nextcloud/dialogs'
 import Forwarder from './Forwarder.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js'
 
 export default {
 	name: 'MessageButtonsBar',
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
index c59215ebe..5105460de 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 export default {
 	name: 'Contact',
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
index 2531f594e..2d889f006 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 export default {
 	name: 'DeckCard',
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
index 09fa12cec..5161febdd 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
@@ -5,8 +5,8 @@ import { cloneDeep } from 'lodash'
 import storeConfig from '../../../../../store/storeConfig.js'
 import { imagePath, generateRemoteUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import FilePreview from './FilePreview.vue'
 
 jest.mock('@nextcloud/initial-state', () => ({
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 64d256421..b0c0e09fa 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -71,14 +71,14 @@
 
 <script>
 import { generateUrl, imagePath, generateRemoteUrl } from '@nextcloud/router'
-import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import Close from 'vue-material-design-icons/Close'
-import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline'
+import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Close from 'vue-material-design-icons/Close.vue'
+import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
 import { getCapabilities } from '@nextcloud/capabilities'
 import { encodePath } from '@nextcloud/paths'
 import AudioPlayer from './AudioPlayer.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 const PREVIEW_TYPE = {
 	TEMPORARY: 0,
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
index d7928f3b1..3a79cb353 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
@@ -38,7 +38,7 @@
 
 <script>
 
-import UserBubble from '@nextcloud/vue/dist/Components/UserBubble'
+import UserBubble from '@nextcloud/vue/dist/Components/UserBubble.js'
 
 export default {
 	name: 'Mention',
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index e1c042aa0..15583dc37 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -55,7 +55,7 @@
 					<!-- options -->
 					<div class="poll__modal-options">
 						<template v-if="checkboxRadioSwitchType === 'radio'">
-							<CheckboxRadioSwitch v-for="option, index in options"
+							<CheckboxRadioSwitch v-for="(option, index) in options"
 								:key="'radio' + index"
 								:checked.sync="vote"
 								class="poll__option"
@@ -66,7 +66,7 @@
 							</CheckboxRadioSwitch>
 						</template>
 						<template v-else>
-							<CheckboxRadioSwitch v-for="option, index in options"
+							<CheckboxRadioSwitch v-for="(option, index) in options"
 								:key="'checkbox' + index"
 								:checked.sync="vote"
 								:value="index.toString()"
@@ -101,7 +101,7 @@
 						{{ n('spreed', 'Poll results • %n vote', 'Poll results • %n votes', votersNumber) }}
 					</div>
 					<div class="results__options">
-						<div v-for="option, index in options"
+						<div v-for="(option, index) in options"
 							:key="index"
 							class="results__option">
 							<div class="results__option-title">
@@ -136,11 +136,11 @@
 
 <script>
 
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import PollIcon from 'vue-material-design-icons/Poll.vue'
-import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar'
+import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar.js'
 import { PARTICIPANT } from '../../../../../constants.js'
 
 export default {
@@ -266,15 +266,11 @@ export default {
 		},
 
 		currentUserIsModerator() {
-			return this.participantTypeIsModerator(this.currentParticipant.participantType)
-		},
-
-		participantTypeIsModerator(participantType) {
-			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(participantType) !== -1
+			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(this.participantType) !== -1
 		},
 
 		canClosePoll() {
-			return this.currentUserIsPollCreator || this.participantTypeIsModerator
+			return this.currentUserIsPollCreator || this.currentUserIsModerator
 		},
 	},
 
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index c3e8988f3..bb21e8e47 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -72,9 +72,9 @@ import { ATTENDEE } from '../../constants.js'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus.js'
 import LoadingPlaceholder from '../LoadingPlaceholder.vue'
-import ChevronDown from 'vue-material-design-icons/ChevronDown'
-import uniqueId from 'lodash/uniqueId'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import uniqueId from 'lodash/uniqueId.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'MessagesList',
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index 536a4858d..9d2e3d5c1 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -98,7 +98,7 @@ import VueAtReparenter from '../../../mixins/vueAtReparenter.js'
 import { EventBus } from '../../../services/EventBus.js'
 import { searchPossibleMentions } from '../../../services/mentionsService.js'
 import { fetchClipboardContent } from '../../../utils/clipboard.js'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
 import Mention from '../../MessagesList/MessagesGroup/Message/MessagePart/Mention.vue'
 import escapeHtml from 'escape-html'
 import debounce from 'debounce'
diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
index a71996005..9444b892d 100644
--- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
+++ b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
@@ -68,14 +68,14 @@
 </template>
 
 <script>
-import Microphone from 'vue-material-design-icons/Microphone'
-import Close from 'vue-material-design-icons/Close'
-import Check from 'vue-material-design-icons/Check'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Microphone from 'vue-material-design-icons/Microphone.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { mediaDevicesManager } from '../../../utils/webrtc/index.js'
 import { showError } from '@nextcloud/dialogs'
 import { MediaRecorder } from 'extendable-media-recorder'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'AudioRecorder',
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index ab51d19de..40f63249d 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -152,10 +152,10 @@ import AdvancedInput from './AdvancedInput/AdvancedInput.vue'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { getCapabilities } from '@nextcloud/capabilities'
 import Quote from '../Quote.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Actions from '@nextcloud/vue/dist/Components/Actions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile } from '../../services/filesSharingServices.js'
 import { CONVERSATION, PARTICIPANT } from '../../constants.js'
diff --git a/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue b/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue
index 3d62b0ce0..1c7ea5f8e 100644
--- a/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue
+++ b/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue
@@ -35,8 +35,8 @@
 </template>
 
 <script>
-import TextField from '@nextcloud/vue/dist/Components/TextField'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import TextField from '@nextcloud/vue/dist/Components/TextField.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import Close from 'vue-material-design-icons/Close.vue'
 
 export default {
diff --git a/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue b/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue
index 6fcecb541..72a45ade4 100644
--- a/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue
+++ b/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue
@@ -75,12 +75,12 @@
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import CheckBoxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import CheckBoxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import PollOption from './PollOption.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
-import TextField from '@nextcloud/vue/dist/Components/TextField'
+import TextField from '@nextcloud/vue/dist/Components/TextField.js'
 import pollService from '../../../services/pollService.js'
 
 export default {
diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue
index ea0a2f649..266488f2b 100644
--- a/src/components/PermissionsEditor/PermissionsEditor.vue
+++ b/src/components/PermissionsEditor/PermissionsEditor.vue
@@ -75,10 +75,10 @@
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
 import { PARTICIPANT } from '../../constants.js'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 const PERMISSIONS = PARTICIPANT.PERMISSIONS
 
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index 29bd43a43..8704dd56a 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -57,7 +57,7 @@ components.
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import RichText from '@juliushaertl/vue-richtext'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
diff --git a/src/components/RightSidebar/LobbyStatus.vue b/src/components/RightSidebar/LobbyStatus.vue
index 7b90fedcd..b409538c5 100644
--- a/src/components/RightSidebar/LobbyStatus.vue
+++ b/src/components/RightSidebar/LobbyStatus.vue
@@ -27,7 +27,7 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'LobbyStatus',
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js
index 420baee2c..01d4a26bc 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js
@@ -5,12 +5,12 @@ import { cloneDeep } from 'lodash'
 import storeConfig from '../../../../../store/storeConfig.js'
 import { ATTENDEE, PARTICIPANT } from '../../../../../constants.js'
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
-import Microphone from 'vue-material-design-icons/Microphone'
-import Phone from 'vue-material-design-icons/Phone'
-import Video from 'vue-material-design-icons/Video'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
+import Microphone from 'vue-material-design-icons/Microphone.vue'
+import Phone from 'vue-material-design-icons/Phone.vue'
+import Video from 'vue-material-design-icons/Video.vue'
+import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import ActionText from '@nextcloud/vue/dist/Components/ActionText.js'
 import { findActionButton } from '../../../../../test-helpers.js'
 
 import Participant from './Participant.vue'
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index 8a8673e09..60afe1f56 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -199,31 +199,31 @@
 <script>
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import ActionText from '@nextcloud/vue/dist/Components/ActionText.js'
+import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Actions from '@nextcloud/vue/dist/Components/Actions.js'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js'
 import UserStatus from '../../../../../mixins/userStatus.js'
 import readableNumber from '../../../../../mixins/readableNumber.js'
-import isEqual from 'lodash/isEqual'
+import isEqual from 'lodash/isEqual.js'
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 import ParticipantPermissionsEditor from './ParticipantPermissionsEditor/ParticipantPermissionsEditor.vue'
 
 // Material design icons
-import Bell from 'vue-material-design-icons/Bell'
-import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal'
-import Microphone from 'vue-material-design-icons/Microphone'
-import Phone from 'vue-material-design-icons/Phone'
-import Video from 'vue-material-design-icons/Video'
+import Bell from 'vue-material-design-icons/Bell.vue'
+import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import Microphone from 'vue-material-design-icons/Microphone.vue'
+import Phone from 'vue-material-design-icons/Phone.vue'
+import Video from 'vue-material-design-icons/Video.vue'
 import Crown from 'vue-material-design-icons/Crown.vue'
 import Account from 'vue-material-design-icons/Account.vue'
 import Lock from 'vue-material-design-icons/Lock.vue'
 import LockOpenVariant from 'vue-material-design-icons/LockOpenVariant.vue'
 import Tune from 'vue-material-design-icons/Tune.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft'
+import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import LockReset from 'vue-material-design-icons/LockReset.vue'
 
 export default {
diff --git a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue b/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
index 7d59e6a99..ba94c2fed 100644
--- a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
@@ -98,10 +98,10 @@
 
 <script>
 import ParticipantsList from '../ParticipantsList/ParticipantsList.vue'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js'
 import Hint from '../../../Hint.vue'
 import AccountPlus from 'vue-material-design-icons/AccountPlus.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'ParticipantsSearchResults',
diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
index 5346f2a62..a8f56b0fa 100644
--- a/src/components/RightSidebar/Participants/ParticipantsTab.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -50,7 +50,7 @@ import { addParticipant } from '../../../services/participantsService.js'
 import { loadState } from '@nextcloud/initial-state'
 import CancelableRequest from '../../../utils/cancelableRequest.js'
 import { showError } from '@nextcloud/dialogs'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js'
 import ParticipantsSearchResults from './ParticipantsSearchResults/ParticipantsSearchResults.vue'
 import getParticipants from '../../../mixins/getParticipants.js'
 
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index 31464e3bc..798fe3c3e 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -97,8 +97,8 @@
 
 <script>
 import { emit } from '@nextcloud/event-bus'
-import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
-import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
+import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar.js'
+import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab.js'
 import SharedItemsTab from './SharedItems/SharedItemsTab.vue'
 import ChatView from '../ChatView.vue'
 import BrowserStorage from '../../services/BrowserStorage.js'
@@ -108,12 +108,12 @@ import isInLobby from '../../mixins/isInLobby.js'
 import SetGuestUsername from '../SetGuestUsername.vue'
 import SipSettings from './SipSettings.vue'
 import LobbyStatus from './LobbyStatus.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import AccountMultiple from 'vue-material-design-icons/AccountMultiple'
-import CogIcon from 'vue-material-design-icons/Cog'
-import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage'
-import InformationOutline from 'vue-material-design-icons/InformationOutline'
-import Message from 'vue-material-design-icons/Message'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import CogIcon from 'vue-material-design-icons/Cog.vue'
+import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
+import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import Message from 'vue-material-design-icons/Message.vue'
 
 export default {
 	name: 'RightSidebar',
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
index c51b4f0a9..51dc47f6c 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
@@ -42,8 +42,8 @@
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import SharedItems from '../SharedItems.vue'
 import sharedItems from '../../../../mixins/sharedItems.js'
 import debounce from 'debounce'
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index 9d720536a..e004467b1 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -56,10 +56,10 @@
 import { CollectionList } from 'nextcloud-vue-collections'
 import SharedItems from './SharedItems.vue'
 import { SHARED_ITEM } from '../../../constants.js'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js'
 import SharedItemsBrowser from './SharedItemsBrowser/SharedItemsBrowser.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 import sharedItems from '../../../mixins/sharedItems.js'
 
 export default {
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index ea06c1c8d..763542ba0 100644
--- a/src/components/SetGuestUsername.vue
+++ b/src/components/SetGuestUsername.vue
@@ -54,8 +54,8 @@
 
 <script>
 import { setGuestUserName } from '../services/participantsService.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Pencil from 'vue-material-design-icons/Pencil'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
 export default {
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index 700f4e1e5..a80ad68a0 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -143,9 +143,9 @@ import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs
 import { PRIVACY } from '../../constants.js'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import MediaDevicesPreview from '../MediaDevicesPreview.vue'
-import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog'
-import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog.js'
+import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection.js'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
 
 export default {
 	name: 'SettingsDialog',
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index d7f27d46e..ea7d34239 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -77,16 +77,16 @@ import browserCheck from '../../mixins/browserCheck.js'
 import isInCall from '../../mixins/isInCall.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import participant from '../../mixins/participant.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import BrowserStorage from '../../services/BrowserStorage.js'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import Video from 'vue-material-design-icons/Video'
-import VideoOff from 'vue-material-design-icons/VideoOff'
-import MenuDown from 'vue-material-design-icons/MenuDown'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import Actions from '@nextcloud/vue/dist/Components/Actions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import Video from 'vue-material-design-icons/Video.vue'
+import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import MenuDown from 'vue-material-design-icons/MenuDown.vue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'CallButton',
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 9ddac8e28..38e45ef25 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -152,27 +152,27 @@
 
 <script>
 import { showError, showSuccess, showMessage } from '@nextcloud/dialogs'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import Actions from '@nextcloud/vue/dist/Components/Actions.js'
+import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble.js'
 import CallButton from './CallButton.vue'
 import BrowserStorage from '../../services/BrowserStorage.js'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import File from 'vue-material-design-icons/File'
+import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js'
+import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js'
+import File from 'vue-material-design-icons/File.vue'
 import MenuPeople from '../missingMaterialDesignIcons/MenuPeople.vue'
-import MessageText from 'vue-material-design-icons/MessageText'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
+import MessageText from 'vue-material-design-icons/MessageText.vue'
+import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
 import { CONVERSATION, PARTICIPANT } from '../../constants.js'
 import { generateUrl } from '@nextcloud/router'
 import { callParticipantCollection, localCallParticipantModel, localMediaModel } from '../../utils/webrtc/index.js'
 import { emit } from '@nextcloud/event-bus'
 import ConversationIcon from '../ConversationIcon.vue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import richEditor from '@nextcloud/vue/dist/Mixins/richEditor'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import richEditor from '@nextcloud/vue/dist/Mixins/richEditor.js'
 import userStatus from '../../mixins/userStatus.js'
 import LocalMediaControls from '../CallView/shared/LocalMediaControls.vue'
-import Cog from 'vue-material-design-icons/Cog'
+import Cog from 'vue-material-design-icons/Cog.vue'
 import getParticipants from '../../mixins/getParticipants.js'
 
 export default {
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index b7de6469a..6e0341c46 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -74,11 +74,11 @@
 
 <script>
 
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Modal from '@nextcloud/vue/dist/Components/Modal.js'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
-import Plus from 'vue-material-design-icons/Plus'
+import Plus from 'vue-material-design-icons/Plus.vue'
 import AudioPlayer from './MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
 
 export default {
 	name: 'UploadEditor',