From 93fb7c58dfae534aed1a6e04d3d8c2e30592be0e Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Fri, 16 Sep 2022 15:28:03 +0200
Subject: [PATCH] Fix eslint issues

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/appointments/main-booking.js              |  2 +-
 src/appointments/main-confirmation.js         |  2 +-
 src/appointments/main-conflict.js             |  2 +-
 src/appointments/main-overview.js             |  2 +-
 .../AppNavigationHeaderDatePicker.vue         |  4 +--
 .../AppNavigationHeaderViewMenu.vue           |  4 +--
 .../AppNavigation/AppointmentConfigList.vue   | 16 +++++------
 .../AppointmentConfigListItem.vue             | 20 ++++++-------
 .../CalendarList/CalendarListItem.vue         | 14 +++++-----
 .../CalendarListItemSharingPublishItem.vue    | 10 +++----
 .../CalendarListItemSharingSearch.vue         |  4 +--
 .../CalendarListItemSharingShareItem.vue      |  8 +++---
 .../CalendarList/CalendarListNew.vue          |  8 +++---
 .../CalendarList/PublicCalendarListItem.vue   | 12 ++++----
 .../AppNavigation/CalendarList/Trashbin.vue   | 16 +++++------
 .../AppNavigation/EmbedTopNavigation.vue      |  6 ++--
 src/components/AppNavigation/Settings.vue     | 12 ++++----
 .../AppNavigation/Settings/ImportScreen.vue   |  2 +-
 .../Settings/SettingsTimezoneSelect.vue       |  2 +-
 .../Settings/ShortcutOverview.vue             |  2 +-
 src/components/AppointmentConfigModal.vue     | 24 ++++++++--------
 .../CheckedDurationSelect.vue                 |  4 +--
 .../AppointmentConfigModal/Confirmation.vue   |  6 ++--
 .../AppointmentConfigModal/DurationInput.vue  |  2 +-
 .../AppointmentConfigModal/DurationSelect.vue |  6 ++--
 .../NoEmailAddressWarning.vue                 |  4 +--
 .../AppointmentConfigModal/NumberInput.vue    |  2 +-
 .../{Select.vue => SelectWrapper.vue}         |  4 +--
 .../AppointmentConfigModal/TextArea.vue       |  4 +--
 .../AppointmentConfigModal/TextInput.vue      |  2 +-
 .../VisibilitySelect.vue                      |  6 ++--
 .../AppointmentBookingConfirmation.vue        |  4 +--
 .../Appointments/AppointmentDetails.vue       |  8 +++---
 .../Appointments/AppointmentSlot.vue          |  2 +-
 src/components/Editor/Alarm/AlarmList.vue     |  4 +--
 src/components/Editor/Alarm/AlarmListItem.vue |  8 +++---
 src/components/Editor/Alarm/AlarmListNew.vue  |  2 +-
 .../Editor/Alarm/AlarmTimeUnitSelect.vue      |  2 +-
 .../Editor/AvatarParticipationStatus.vue      | 10 +++----
 src/components/Editor/FreeBusy/FreeBusy.vue   |  4 +--
 .../Editor/InvitationResponseButtons.vue      |  6 ++--
 .../Editor/Invitees/InviteesList.vue          | 10 +++----
 .../Editor/Invitees/InviteesListItem.vue      | 12 ++++----
 .../Editor/Invitees/InviteesListSearch.vue    |  6 ++--
 .../Editor/Invitees/OrganizerListItem.vue     |  4 +--
 .../Properties/PropertyCalendarPicker.vue     |  2 +-
 .../Editor/Properties/PropertyColor.vue       |  8 +++---
 .../Editor/Properties/PropertySelect.vue      |  4 +--
 .../Properties/PropertySelectMultiple.vue     |  4 +--
 .../PropertySelectMultipleColoredOption.vue   |  2 +-
 .../Editor/Properties/PropertyText.vue        |  4 +--
 .../Properties/PropertyTitleTimePicker.vue    |  2 +-
 src/components/Editor/Repeat/Repeat.vue       |  4 +--
 .../Editor/Repeat/RepeatEndRepeat.vue         |  2 +-
 .../Editor/Repeat/RepeatFirstLastSelect.vue   |  2 +-
 .../Repeat/RepeatFreqMonthlyOptions.vue       |  2 +-
 .../Editor/Repeat/RepeatFreqSelect.vue        |  2 +-
 .../Editor/Repeat/RepeatFreqYearlyOptions.vue |  2 +-
 .../Editor/Repeat/RepeatOnTheSelect.vue       |  2 +-
 .../Editor/Resources/ResourceList.vue         | 16 +++++------
 .../Editor/Resources/ResourceListItem.vue     | 18 ++++++------
 .../Editor/Resources/ResourceListSearch.vue   | 18 ++++++------
 .../Editor/Resources/ResourceRoomType.vue     |  4 +--
 src/components/EmptyCalendar.vue              |  2 +-
 src/components/Shared/CalendarPicker.vue      |  2 +-
 .../Shared/CalendarPickerOption.vue           |  2 +-
 src/components/Shared/DatePicker.vue          | 28 +++++++++----------
 src/components/Shared/TimePicker.vue          |  2 +-
 src/components/Shared/TimezoneSelect.vue      |  2 +-
 src/dashboard.js                              |  4 +--
 src/fullcalendar/eventSources/eventSource.js  |  2 +-
 .../freeBusyBlockedForAllEventSource.js       |  2 +-
 src/fullcalendar/interaction/eventClick.js    |  2 +-
 src/fullcalendar/interaction/eventDrop.js     |  4 +--
 src/fullcalendar/interaction/eventResize.js   |  2 +-
 .../rendering/noEventsDidMount.js             |  4 +--
 .../timezones/vtimezoneNamedTimezoneImpl.js   |  2 +-
 src/main.js                                   | 10 +++----
 src/mixins/EditorMixin.js                     |  4 +--
 src/router.js                                 |  6 ++--
 src/services/appointmentConfigService.js      |  4 +--
 src/services/freeBusyService.js               |  4 +--
 src/store/appointmentConfigs.js               |  4 +--
 src/store/calendarObjectInstance.js           |  4 +--
 src/store/calendarObjects.js                  |  2 +-
 src/store/calendars.js                        |  4 +--
 src/store/index.js                            | 12 ++++----
 src/store/principals.js                       |  2 +-
 src/store/settings.js                         |  6 ++--
 src/utils/freebusy.js                         |  2 +-
 src/views/Appointments/Booking.vue            | 14 +++++-----
 src/views/Appointments/Overview.vue           |  6 ++--
 src/views/Calendar.vue                        | 22 +++++++--------
 src/views/Dashboard.vue                       | 14 +++++-----
 src/views/EditSidebar.vue                     | 28 +++++++++----------
 src/views/EditSimple.vue                      | 14 +++++-----
 96 files changed, 307 insertions(+), 307 deletions(-)
 rename src/components/AppointmentConfigModal/{Select.vue => SelectWrapper.vue} (95%)

diff --git a/src/appointments/main-booking.js b/src/appointments/main-booking.js
index 50333ab05..59719392d 100644
--- a/src/appointments/main-booking.js
+++ b/src/appointments/main-booking.js
@@ -26,7 +26,7 @@ import { linkTo } from '@nextcloud/router'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import Vue from 'vue'
 
-import Booking from '../views/Appointments/Booking'
+import Booking from '../views/Appointments/Booking.vue'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
diff --git a/src/appointments/main-confirmation.js b/src/appointments/main-confirmation.js
index 79c43e585..0f56ca6e7 100644
--- a/src/appointments/main-confirmation.js
+++ b/src/appointments/main-confirmation.js
@@ -26,7 +26,7 @@ import { linkTo } from '@nextcloud/router'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import Vue from 'vue'
 
-import Confirmation from '../views/Appointments/Confirmation'
+import Confirmation from '../views/Appointments/Confirmation.vue'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
diff --git a/src/appointments/main-conflict.js b/src/appointments/main-conflict.js
index 19157b01a..5f467a310 100644
--- a/src/appointments/main-conflict.js
+++ b/src/appointments/main-conflict.js
@@ -26,7 +26,7 @@ import { linkTo } from '@nextcloud/router'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import Vue from 'vue'
 
-import Conflict from '../views/Appointments/Conflict'
+import Conflict from '../views/Appointments/Conflict.vue'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
diff --git a/src/appointments/main-overview.js b/src/appointments/main-overview.js
index e434a2397..08ea4feb2 100644
--- a/src/appointments/main-overview.js
+++ b/src/appointments/main-overview.js
@@ -26,7 +26,7 @@ import { linkTo } from '@nextcloud/router'
 import Vue from 'vue'
 import { translate, translatePlural } from '@nextcloud/l10n'
 
-import Overview from '../views/Appointments/Overview'
+import Overview from '../views/Appointments/Overview.vue'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
index 6da4a611d..b45db6a86 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
@@ -64,8 +64,8 @@ import {
 import { mapState } from 'vuex'
 import formatDateRage from '../../../filters/dateRangeFormat.js'
 import DatePicker from '../../Shared/DatePicker.vue'
-import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft'
-import ChevronRightIcon from 'vue-material-design-icons/ChevronRight'
+import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
+import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 
 export default {
 	name: 'AppNavigationHeaderDatePicker',
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue
index 0024e96a3..5384eaf53 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue
@@ -39,8 +39,8 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 import ViewDay from 'vue-material-design-icons/ViewDay.vue'
 import ViewGrid from 'vue-material-design-icons/ViewGrid.vue'
diff --git a/src/components/AppNavigation/AppointmentConfigList.vue b/src/components/AppNavigation/AppointmentConfigList.vue
index ea7d7f322..e0adfb9fb 100644
--- a/src/components/AppNavigation/AppointmentConfigList.vue
+++ b/src/components/AppNavigation/AppointmentConfigList.vue
@@ -59,15 +59,15 @@
 </template>
 
 <script>
-import AppointmentConfigListItem from './AppointmentConfigList/AppointmentConfigListItem'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import PlusIcon from 'vue-material-design-icons/Plus'
-import AppointmentConfigModal from '../AppointmentConfigModal'
-import AppointmentConfig from '../../models/appointmentConfig'
-import logger from '../../utils/logger'
+import AppointmentConfigListItem from './AppointmentConfigList/AppointmentConfigListItem.vue'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import AppointmentConfigModal from '../AppointmentConfigModal.vue'
+import AppointmentConfig from '../../models/appointmentConfig.js'
+import logger from '../../utils/logger.js'
 import { mapGetters } from 'vuex'
-import NoEmailAddressWarning from '../AppointmentConfigModal/NoEmailAddressWarning'
+import NoEmailAddressWarning from '../AppointmentConfigModal/NoEmailAddressWarning.vue'
 
 export default {
 	name: 'AppointmentConfigList',
diff --git a/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue b/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue
index bfcf6a6ad..3fde84d6c 100644
--- a/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue
+++ b/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue
@@ -59,18 +59,18 @@
 </template>
 
 <script>
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck'
-import DeleteIcon from 'vue-material-design-icons/Delete'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
-import PencilIcon from 'vue-material-design-icons/Pencil'
-import AppointmentConfig from '../../../models/appointmentConfig'
-import AppointmentConfigModal from '../../AppointmentConfigModal'
-import LinkVariantIcon from 'vue-material-design-icons/LinkVariant'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import AppointmentConfig from '../../../models/appointmentConfig.js'
+import AppointmentConfigModal from '../../AppointmentConfigModal.vue'
+import LinkVariantIcon from 'vue-material-design-icons/LinkVariant.vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import logger from '../../../utils/logger'
+import logger from '../../../utils/logger.js'
 
 export default {
 	name: 'AppointmentConfigListItem',
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
index 21f72acfb..f50e78aa8 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
@@ -152,13 +152,13 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import ClickOutside from 'vue-click-outside'
 import {
 	showInfo,
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
index 2428c8371..ba764a11f 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
@@ -144,11 +144,11 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import ClickOutside from 'vue-click-outside'
 import {
 	generateRemoteUrl,
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue b/src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue
index cee5faa4b..cfae4c5de 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue
@@ -43,12 +43,12 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
 import HttpClient from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
-import { urldecode } from '../../../utils/url'
+import { urldecode } from '../../../utils/url.js'
 
 export default {
 	name: 'CalendarListItemSharingSearch',
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
index 1b5b80fdc..8f1f79e3f 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
@@ -51,10 +51,10 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import {
 	showInfo,
 } from '@nextcloud/dialogs'
diff --git a/src/components/AppNavigation/CalendarList/CalendarListNew.vue b/src/components/AppNavigation/CalendarList/CalendarListNew.vue
index b5cc0e33a..4e4548ee4 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListNew.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListNew.vue
@@ -93,10 +93,10 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import {
 	showError,
 } from '@nextcloud/dialogs'
diff --git a/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue b/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
index 3d8548595..e9fb0f9ec 100644
--- a/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
+++ b/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
@@ -74,12 +74,12 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/NcAppNavigationIconBullet'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/NcAppNavigationIconBullet.js'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import {
 	generateRemoteUrl,
 } from '@nextcloud/router'
diff --git a/src/components/AppNavigation/CalendarList/Trashbin.vue b/src/components/AppNavigation/CalendarList/Trashbin.vue
index 55539ba69..69cd47a36 100644
--- a/src/components/AppNavigation/CalendarList/Trashbin.vue
+++ b/src/components/AppNavigation/CalendarList/Trashbin.vue
@@ -107,17 +107,17 @@
 </template>
 
 <script>
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import moment from '@nextcloud/moment'
-import logger from '../../../utils/logger'
+import logger from '../../../utils/logger.js'
 import { showError } from '@nextcloud/dialogs'
 import { mapGetters } from 'vuex'
-import Moment from './Moment'
-import { uidToHexColor } from '../../../utils/color'
+import Moment from './Moment.vue'
+import { uidToHexColor } from '../../../utils/color.js'
 
 import Delete from 'vue-material-design-icons/Delete.vue'
 
diff --git a/src/components/AppNavigation/EmbedTopNavigation.vue b/src/components/AppNavigation/EmbedTopNavigation.vue
index d13d2bff2..1a6c47590 100644
--- a/src/components/AppNavigation/EmbedTopNavigation.vue
+++ b/src/components/AppNavigation/EmbedTopNavigation.vue
@@ -41,9 +41,9 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import {
 	mapGetters,
 } from 'vuex'
diff --git a/src/components/AppNavigation/Settings.vue b/src/components/AppNavigation/Settings.vue
index 0f2686919..c0b552115 100644
--- a/src/components/AppNavigation/Settings.vue
+++ b/src/components/AppNavigation/Settings.vue
@@ -116,11 +116,11 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import AppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import AppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import {
 	generateRemoteUrl,
 	generateUrl,
@@ -150,7 +150,7 @@ import { getDefaultAlarms } from '../../defaults/defaultAlarmProvider.js'
 
 import ClipboardArrowLeftOutline from 'vue-material-design-icons/ClipboardArrowLeftOutline.vue'
 import InformationVariant from 'vue-material-design-icons/InformationVariant.vue'
-import OpenInNewIcon from 'vue-material-design-icons/OpenInNew'
+import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 
 export default {
 	name: 'Settings',
diff --git a/src/components/AppNavigation/Settings/ImportScreen.vue b/src/components/AppNavigation/Settings/ImportScreen.vue
index 9561e6049..f79b8cfa9 100644
--- a/src/components/AppNavigation/Settings/ImportScreen.vue
+++ b/src/components/AppNavigation/Settings/ImportScreen.vue
@@ -55,7 +55,7 @@
 
 <script>
 import ImportScreenRow from './ImportScreenRow.vue'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 export default {
 	name: 'ImportScreen',
diff --git a/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue b/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
index 85f7963b4..0b9815e71 100644
--- a/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
+++ b/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
@@ -32,7 +32,7 @@ import {
 	mapState,
 } from 'vuex'
 
-import TimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker'
+import TimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker.js'
 import { detectTimezone } from '../../../services/timezoneDetectionService.js'
 import {
 	showInfo,
diff --git a/src/components/AppNavigation/Settings/ShortcutOverview.vue b/src/components/AppNavigation/Settings/ShortcutOverview.vue
index 31258e724..473411ac1 100644
--- a/src/components/AppNavigation/Settings/ShortcutOverview.vue
+++ b/src/components/AppNavigation/Settings/ShortcutOverview.vue
@@ -57,7 +57,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 export default {
 	components: {
diff --git a/src/components/AppointmentConfigModal.vue b/src/components/AppointmentConfigModal.vue
index 043019170..cdf33dcd7 100644
--- a/src/components/AppointmentConfigModal.vue
+++ b/src/components/AppointmentConfigModal.vue
@@ -139,19 +139,19 @@
 
 <script>
 import { CalendarAvailability } from '@nextcloud/calendar-availability-vue'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
-import TextInput from './AppointmentConfigModal/TextInput'
-import TextArea from './AppointmentConfigModal/TextArea'
-import AppointmentConfig from '../models/appointmentConfig'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import TextInput from './AppointmentConfigModal/TextInput.vue'
+import TextArea from './AppointmentConfigModal/TextArea.vue'
+import AppointmentConfig from '../models/appointmentConfig.js'
 import { mapGetters } from 'vuex'
-import CalendarPicker from './Shared/CalendarPicker'
-import DurationInput from './AppointmentConfigModal/DurationInput'
-import NumberInput from './AppointmentConfigModal/NumberInput'
-import DurationSelect from './AppointmentConfigModal/DurationSelect'
-import CheckedDurationSelect from './AppointmentConfigModal/CheckedDurationSelect'
-import VisibilitySelect from './AppointmentConfigModal/VisibilitySelect'
-import logger from '../utils/logger'
-import Confirmation from './AppointmentConfigModal/Confirmation'
+import CalendarPicker from './Shared/CalendarPicker.vue'
+import DurationInput from './AppointmentConfigModal/DurationInput.vue'
+import NumberInput from './AppointmentConfigModal/NumberInput.vue'
+import DurationSelect from './AppointmentConfigModal/DurationSelect.vue'
+import CheckedDurationSelect from './AppointmentConfigModal/CheckedDurationSelect.vue'
+import VisibilitySelect from './AppointmentConfigModal/VisibilitySelect.vue'
+import logger from '../utils/logger.js'
+import Confirmation from './AppointmentConfigModal/Confirmation.vue'
 
 export default {
 	name: 'AppointmentConfigModal',
diff --git a/src/components/AppointmentConfigModal/CheckedDurationSelect.vue b/src/components/AppointmentConfigModal/CheckedDurationSelect.vue
index cdafd3e15..47912d999 100644
--- a/src/components/AppointmentConfigModal/CheckedDurationSelect.vue
+++ b/src/components/AppointmentConfigModal/CheckedDurationSelect.vue
@@ -42,8 +42,8 @@
 </template>
 
 <script>
-import DurationSelect from './DurationSelect'
-import { randomId } from '../../utils/randomId'
+import DurationSelect from './DurationSelect.vue'
+import { randomId } from '../../utils/randomId.js'
 
 export default {
 	name: 'CheckedDurationSelect',
diff --git a/src/components/AppointmentConfigModal/Confirmation.vue b/src/components/AppointmentConfigModal/Confirmation.vue
index 6f4037ebe..4271bea7c 100644
--- a/src/components/AppointmentConfigModal/Confirmation.vue
+++ b/src/components/AppointmentConfigModal/Confirmation.vue
@@ -43,9 +43,9 @@
 </template>
 
 <script>
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import CheckIcon from 'vue-material-design-icons/Check'
-import AppointmentConfig from '../../models/appointmentConfig'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+import AppointmentConfig from '../../models/appointmentConfig.js'
 
 export default {
 	name: 'Confirmation',
diff --git a/src/components/AppointmentConfigModal/DurationInput.vue b/src/components/AppointmentConfigModal/DurationInput.vue
index dd7e1b13c..e0ef528c2 100644
--- a/src/components/AppointmentConfigModal/DurationInput.vue
+++ b/src/components/AppointmentConfigModal/DurationInput.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { randomId } from '../../utils/randomId'
+import { randomId } from '../../utils/randomId.js'
 
 export default {
 	name: 'DurationInput',
diff --git a/src/components/AppointmentConfigModal/DurationSelect.vue b/src/components/AppointmentConfigModal/DurationSelect.vue
index f9538ee65..8fa946a85 100644
--- a/src/components/AppointmentConfigModal/DurationSelect.vue
+++ b/src/components/AppointmentConfigModal/DurationSelect.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Select :label="label"
+	<SelectWrapper :label="label"
 		:value="value"
 		:disabled="disabled"
 		:options="options"
@@ -29,12 +29,12 @@
 </template>
 
 <script>
-import Select from './Select'
+import SelectWrapper from './SelectWrapper.vue'
 
 export default {
 	name: 'DurationSelect',
 	components: {
-		Select,
+		SelectWrapper,
 	},
 	props: {
 		label: {
diff --git a/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue b/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue
index 245cdde76..f3a96392f 100644
--- a/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue
+++ b/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue
@@ -28,8 +28,8 @@
 </template>
 
 <script>
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import AlertCircleIcon from 'vue-material-design-icons/AlertCircle'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import AlertCircleIcon from 'vue-material-design-icons/AlertCircle.vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
diff --git a/src/components/AppointmentConfigModal/NumberInput.vue b/src/components/AppointmentConfigModal/NumberInput.vue
index 4383b1bfe..db41f5efd 100644
--- a/src/components/AppointmentConfigModal/NumberInput.vue
+++ b/src/components/AppointmentConfigModal/NumberInput.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { randomId } from '../../utils/randomId'
+import { randomId } from '../../utils/randomId.js'
 
 export default {
 	name: 'NumberInput',
diff --git a/src/components/AppointmentConfigModal/Select.vue b/src/components/AppointmentConfigModal/SelectWrapper.vue
similarity index 95%
rename from src/components/AppointmentConfigModal/Select.vue
rename to src/components/AppointmentConfigModal/SelectWrapper.vue
index 04a88f3f4..b3a71b1d1 100644
--- a/src/components/AppointmentConfigModal/Select.vue
+++ b/src/components/AppointmentConfigModal/SelectWrapper.vue
@@ -37,10 +37,10 @@
 </template>
 
 <script>
-import { randomId } from '../../utils/randomId'
+import { randomId } from '../../utils/randomId.js'
 
 export default {
-	name: 'Select',
+	name: 'SelectWrapper',
 	props: {
 		label: {
 			type: String,
diff --git a/src/components/AppointmentConfigModal/TextArea.vue b/src/components/AppointmentConfigModal/TextArea.vue
index 4a73dcc94..31c7b1f5a 100644
--- a/src/components/AppointmentConfigModal/TextArea.vue
+++ b/src/components/AppointmentConfigModal/TextArea.vue
@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import { randomId } from '../../utils/randomId'
-import autosize from '../../directives/autosize'
+import { randomId } from '../../utils/randomId.js'
+import autosize from '../../directives/autosize.js'
 
 export default {
 	name: 'TextArea',
diff --git a/src/components/AppointmentConfigModal/TextInput.vue b/src/components/AppointmentConfigModal/TextInput.vue
index 578214d7f..70e4d6501 100644
--- a/src/components/AppointmentConfigModal/TextInput.vue
+++ b/src/components/AppointmentConfigModal/TextInput.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import { randomId } from '../../utils/randomId'
+import { randomId } from '../../utils/randomId.js'
 
 export default {
 	name: 'TextInput',
diff --git a/src/components/AppointmentConfigModal/VisibilitySelect.vue b/src/components/AppointmentConfigModal/VisibilitySelect.vue
index 4d570e7e8..72ecd5828 100644
--- a/src/components/AppointmentConfigModal/VisibilitySelect.vue
+++ b/src/components/AppointmentConfigModal/VisibilitySelect.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Select :label="label"
+	<SelectWrapper :label="label"
 		:value="value"
 		:disabled="disabled"
 		:options="options"
@@ -29,12 +29,12 @@
 </template>
 
 <script>
-import Select from './Select'
+import SelectWrapper from './SelectWrapper.vue'
 
 export default {
 	name: 'VisibilitySelect',
 	components: {
-		Select,
+		SelectWrapper,
 	},
 	props: {
 		label: {
diff --git a/src/components/Appointments/AppointmentBookingConfirmation.vue b/src/components/Appointments/AppointmentBookingConfirmation.vue
index 776e18724..be1eb48f0 100644
--- a/src/components/Appointments/AppointmentBookingConfirmation.vue
+++ b/src/components/Appointments/AppointmentBookingConfirmation.vue
@@ -31,8 +31,8 @@
 </template>
 
 <script>
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import CheckIcon from 'vue-material-design-icons/Check'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
 
 export default {
 	name: 'AppointmentBookingConfirmation',
diff --git a/src/components/Appointments/AppointmentDetails.vue b/src/components/Appointments/AppointmentDetails.vue
index 27c10ecf8..dda714829 100644
--- a/src/components/Appointments/AppointmentDetails.vue
+++ b/src/components/Appointments/AppointmentDetails.vue
@@ -65,11 +65,11 @@
 	</Modal>
 </template>
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
-import autosize from '../../directives/autosize'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import autosize from '../../directives/autosize.js'
 
-import { timeStampToLocaleTime } from '../../utils/localeTime'
+import { timeStampToLocaleTime } from '../../utils/localeTime.js'
 
 export default {
 	name: 'AppointmentDetails',
diff --git a/src/components/Appointments/AppointmentSlot.vue b/src/components/Appointments/AppointmentSlot.vue
index 3039f4112..08220be63 100644
--- a/src/components/Appointments/AppointmentSlot.vue
+++ b/src/components/Appointments/AppointmentSlot.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { timeStampToLocaleTime } from '../../utils/localeTime'
+import { timeStampToLocaleTime } from '../../utils/localeTime.js'
 
 export default {
 	name: 'AppointmentSlot',
diff --git a/src/components/Editor/Alarm/AlarmList.vue b/src/components/Editor/Alarm/AlarmList.vue
index ca68272c0..4e42751e2 100644
--- a/src/components/Editor/Alarm/AlarmList.vue
+++ b/src/components/Editor/Alarm/AlarmList.vue
@@ -39,8 +39,8 @@
 </template>
 
 <script>
-import AlarmListNew from './AlarmListNew'
-import AlarmListItem from './AlarmListItem'
+import AlarmListNew from './AlarmListNew.vue'
+import AlarmListItem from './AlarmListItem.vue'
 import { mapState } from 'vuex'
 
 export default {
diff --git a/src/components/Editor/Alarm/AlarmListItem.vue b/src/components/Editor/Alarm/AlarmListItem.vue
index 2fe4dd84c..360d7cb58 100644
--- a/src/components/Editor/Alarm/AlarmListItem.vue
+++ b/src/components/Editor/Alarm/AlarmListItem.vue
@@ -152,10 +152,10 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio'
-import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
+import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import { mapState } from 'vuex'
 import ClickOutside from 'vue-click-outside'
 import formatAlarm from '../../../filters/alarmFormat.js'
diff --git a/src/components/Editor/Alarm/AlarmListNew.vue b/src/components/Editor/Alarm/AlarmListNew.vue
index bd2a93a88..352100fcf 100644
--- a/src/components/Editor/Alarm/AlarmListNew.vue
+++ b/src/components/Editor/Alarm/AlarmListNew.vue
@@ -38,7 +38,7 @@ import {
 	getAmountHoursMinutesAndUnitForAllDayEvents,
 } from '../../../utils/alarms.js'
 import alarmFormat from '../../../filters/alarmFormat.js'
-import PropertySelect from '../Properties/PropertySelect'
+import PropertySelect from '../Properties/PropertySelect.vue'
 
 export default {
 	name: 'AlarmListNew',
diff --git a/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue b/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
index 8ec03c1b3..568993c04 100644
--- a/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
+++ b/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
 export default {
 	name: 'AlarmTimeUnitSelect',
diff --git a/src/components/Editor/AvatarParticipationStatus.vue b/src/components/Editor/AvatarParticipationStatus.vue
index fa2516f51..d33543732 100644
--- a/src/components/Editor/AvatarParticipationStatus.vue
+++ b/src/components/Editor/AvatarParticipationStatus.vue
@@ -124,11 +124,11 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import IconCheck from 'vue-material-design-icons/CheckCircle'
-import IconNoResponse from 'vue-material-design-icons/HelpCircle'
-import IconClose from 'vue-material-design-icons/CloseCircle'
-import IconDelegated from 'vue-material-design-icons/ArrowRightDropCircle'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import IconCheck from 'vue-material-design-icons/CheckCircle.vue'
+import IconNoResponse from 'vue-material-design-icons/HelpCircle.vue'
+import IconClose from 'vue-material-design-icons/CloseCircle.vue'
+import IconDelegated from 'vue-material-design-icons/ArrowRightDropCircle.vue'
 
 export default {
 	name: 'AvatarParticipationStatus',
diff --git a/src/components/Editor/FreeBusy/FreeBusy.vue b/src/components/Editor/FreeBusy/FreeBusy.vue
index b93da65f3..0ff131b49 100644
--- a/src/components/Editor/FreeBusy/FreeBusy.vue
+++ b/src/components/Editor/FreeBusy/FreeBusy.vue
@@ -71,8 +71,8 @@ import {
 	mapGetters,
 	mapState,
 } from 'vuex'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
-import DatePicker from '../../Shared/DatePicker'
+import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import DatePicker from '../../Shared/DatePicker.vue'
 import { getColorForFBType } from '../../../utils/freebusy.js'
 import { getLocale } from '@nextcloud/l10n'
 import { getFirstDayOfWeekFromMomentLocale } from '../../../utils/moment.js'
diff --git a/src/components/Editor/InvitationResponseButtons.vue b/src/components/Editor/InvitationResponseButtons.vue
index 5da30a76e..4989d997e 100644
--- a/src/components/Editor/InvitationResponseButtons.vue
+++ b/src/components/Editor/InvitationResponseButtons.vue
@@ -56,11 +56,11 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import CalendarQuestionIcon from 'vue-material-design-icons/CalendarQuestion.vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import logger from '../../utils/logger'
+import logger from '../../utils/logger.js'
 
 export default {
 	name: 'InvitationResponseButtons',
diff --git a/src/components/Editor/Invitees/InviteesList.vue b/src/components/Editor/Invitees/InviteesList.vue
index 2a9809579..e35e43118 100644
--- a/src/components/Editor/Invitees/InviteesList.vue
+++ b/src/components/Editor/Invitees/InviteesList.vue
@@ -63,10 +63,10 @@
 
 <script>
 import { mapState } from 'vuex'
-import InviteesListSearch from './InviteesListSearch'
-import InviteesListItem from './InviteesListItem'
-import OrganizerListItem from './OrganizerListItem'
-import NoAttendeesView from '../NoAttendeesView'
+import InviteesListSearch from './InviteesListSearch.vue'
+import InviteesListItem from './InviteesListItem.vue'
+import OrganizerListItem from './OrganizerListItem.vue'
+import NoAttendeesView from '../NoAttendeesView.vue'
 import OrganizerNoEmailError from '../OrganizerNoEmailError.vue'
 import { createTalkRoom, doesDescriptionContainTalkLink } from '../../../services/talkService.js'
 import FreeBusy from '../FreeBusy/FreeBusy.vue'
@@ -74,7 +74,7 @@ import {
 	showSuccess,
 	showError,
 } from '@nextcloud/dialogs'
-import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attendee'
+import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attendee.js'
 
 export default {
 	name: 'InviteesList',
diff --git a/src/components/Editor/Invitees/InviteesListItem.vue b/src/components/Editor/Invitees/InviteesListItem.vue
index 27a9a3414..ed28ab5ea 100644
--- a/src/components/Editor/Invitees/InviteesListItem.vue
+++ b/src/components/Editor/Invitees/InviteesListItem.vue
@@ -73,12 +73,12 @@
 </template>
 
 <script>
-import AvatarParticipationStatus from '../AvatarParticipationStatus'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import { removeMailtoPrefix } from '../../../utils/attendee'
+import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import { removeMailtoPrefix } from '../../../utils/attendee.js'
 
 import Delete from 'vue-material-design-icons/Delete.vue'
 
diff --git a/src/components/Editor/Invitees/InviteesListSearch.vue b/src/components/Editor/Invitees/InviteesListSearch.vue
index f2e2fceaa..0f7898751 100644
--- a/src/components/Editor/Invitees/InviteesListSearch.vue
+++ b/src/components/Editor/Invitees/InviteesListSearch.vue
@@ -62,13 +62,13 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
 import HttpClient from '@nextcloud/axios'
 import debounce from 'debounce'
 import { linkTo } from '@nextcloud/router'
-import { randomId } from '../../../utils/randomId'
+import { randomId } from '../../../utils/randomId.js'
 
 export default {
 	name: 'InviteesListSearch',
diff --git a/src/components/Editor/Invitees/OrganizerListItem.vue b/src/components/Editor/Invitees/OrganizerListItem.vue
index 93bacc337..221d1521d 100644
--- a/src/components/Editor/Invitees/OrganizerListItem.vue
+++ b/src/components/Editor/Invitees/OrganizerListItem.vue
@@ -40,8 +40,8 @@
 </template>
 
 <script>
-import AvatarParticipationStatus from '../AvatarParticipationStatus'
-import { removeMailtoPrefix } from '../../../utils/attendee'
+import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
+import { removeMailtoPrefix } from '../../../utils/attendee.js'
 
 export default {
 	name: 'OrganizerListItem',
diff --git a/src/components/Editor/Properties/PropertyCalendarPicker.vue b/src/components/Editor/Properties/PropertyCalendarPicker.vue
index 690190be2..caa31e284 100644
--- a/src/components/Editor/Properties/PropertyCalendarPicker.vue
+++ b/src/components/Editor/Properties/PropertyCalendarPicker.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import CalendarPicker from '../../Shared/CalendarPicker'
+import CalendarPicker from '../../Shared/CalendarPicker.vue'
 import CalendarPickerOption from '../../Shared/CalendarPickerOption.vue'
 
 export default {
diff --git a/src/components/Editor/Properties/PropertyColor.vue b/src/components/Editor/Properties/PropertyColor.vue
index 848d81e14..6e39c1a1f 100644
--- a/src/components/Editor/Properties/PropertyColor.vue
+++ b/src/components/Editor/Properties/PropertyColor.vue
@@ -57,10 +57,10 @@
 </template>
 
 <script>
-import PropertyMixin from '../../../mixins/PropertyMixin'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker'
+import PropertyMixin from '../../../mixins/PropertyMixin.js'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import debounce from 'debounce'
 
 import Undo from 'vue-material-design-icons/Undo.vue'
diff --git a/src/components/Editor/Properties/PropertySelect.vue b/src/components/Editor/Properties/PropertySelect.vue
index e396cf6e9..07f670fd5 100644
--- a/src/components/Editor/Properties/PropertySelect.vue
+++ b/src/components/Editor/Properties/PropertySelect.vue
@@ -55,8 +55,8 @@
 </template>
 
 <script>
-import PropertyMixin from '../../../mixins/PropertyMixin'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import PropertyMixin from '../../../mixins/PropertyMixin.js'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
 import InformationVariant from 'vue-material-design-icons/InformationVariant.vue'
 
diff --git a/src/components/Editor/Properties/PropertySelectMultiple.vue b/src/components/Editor/Properties/PropertySelectMultiple.vue
index eae51d1db..09094cdcc 100644
--- a/src/components/Editor/Properties/PropertySelectMultiple.vue
+++ b/src/components/Editor/Properties/PropertySelectMultiple.vue
@@ -71,8 +71,8 @@
 </template>
 
 <script>
-import PropertyMixin from '../../../mixins/PropertyMixin'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import PropertyMixin from '../../../mixins/PropertyMixin.js'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import PropertySelectMultipleColoredTag from './PropertySelectMultipleColoredTag.vue'
 import PropertySelectMultipleColoredOption from './PropertySelectMultipleColoredOption.vue'
 import { getLocale } from '@nextcloud/l10n'
diff --git a/src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue b/src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue
index 358c64698..546cdce32 100644
--- a/src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue
+++ b/src/components/Editor/Properties/PropertySelectMultipleColoredOption.vue
@@ -30,7 +30,7 @@
 
 <script>
 import { uidToColor } from '../../../utils/uidToColor.js'
-import logger from '../../../utils/logger'
+import logger from '../../../utils/logger.js'
 
 export default {
 	name: 'PropertySelectMultipleColoredOption',
diff --git a/src/components/Editor/Properties/PropertyText.vue b/src/components/Editor/Properties/PropertyText.vue
index 4078d5c77..202021896 100644
--- a/src/components/Editor/Properties/PropertyText.vue
+++ b/src/components/Editor/Properties/PropertyText.vue
@@ -54,8 +54,8 @@
 
 <script>
 import autosize from '../../../directives/autosize.js'
-import PropertyMixin from '../../../mixins/PropertyMixin'
-import linkify from '@nextcloud/vue/dist/Directives/Linkify'
+import PropertyMixin from '../../../mixins/PropertyMixin.js'
+import linkify from '@nextcloud/vue/dist/Directives/Linkify.js'
 
 import InformationVariant from 'vue-material-design-icons/InformationVariant.vue'
 
diff --git a/src/components/Editor/Properties/PropertyTitleTimePicker.vue b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
index 1ed8fbe37..cf63dcb28 100644
--- a/src/components/Editor/Properties/PropertyTitleTimePicker.vue
+++ b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
@@ -84,7 +84,7 @@
 <script>
 import moment from '@nextcloud/moment'
 import DatePicker from '../../Shared/DatePicker.vue'
-import IconTimezone from 'vue-material-design-icons/Web'
+import IconTimezone from 'vue-material-design-icons/Web.vue'
 import { mapState } from 'vuex'
 
 export default {
diff --git a/src/components/Editor/Repeat/Repeat.vue b/src/components/Editor/Repeat/Repeat.vue
index 4fdd96568..39253987e 100644
--- a/src/components/Editor/Repeat/Repeat.vue
+++ b/src/components/Editor/Repeat/Repeat.vue
@@ -99,8 +99,8 @@ import RepeatSummary from './RepeatSummary.vue'
 import RepeatIcon from 'vue-material-design-icons/Repeat.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Check from 'vue-material-design-icons/Check.vue'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 export default {
 	name: 'Repeat',
diff --git a/src/components/Editor/Repeat/RepeatEndRepeat.vue b/src/components/Editor/Repeat/RepeatEndRepeat.vue
index b69915f27..05cb326fe 100644
--- a/src/components/Editor/Repeat/RepeatEndRepeat.vue
+++ b/src/components/Editor/Repeat/RepeatEndRepeat.vue
@@ -54,7 +54,7 @@
 
 <script>
 import DatePicker from '../../Shared/DatePicker.vue'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
 export default {
 	name: 'RepeatEndRepeat',
diff --git a/src/components/Editor/Repeat/RepeatFirstLastSelect.vue b/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
index a16328af2..f84a66b1b 100644
--- a/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
+++ b/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
 export default {
 	name: 'RepeatFirstLastSelect',
diff --git a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
index ad822a760..4d91ebf5f 100644
--- a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
@@ -60,7 +60,7 @@
 <script>
 import RepeatFirstLastSelect from './RepeatFirstLastSelect.vue'
 import RepeatOnTheSelect from './RepeatOnTheSelect.vue'
-import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio'
+import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
 
 export default {
 	name: 'RepeatFreqMonthlyOptions',
diff --git a/src/components/Editor/Repeat/RepeatFreqSelect.vue b/src/components/Editor/Repeat/RepeatFreqSelect.vue
index c4d8bc5f8..fbcc8a20c 100644
--- a/src/components/Editor/Repeat/RepeatFreqSelect.vue
+++ b/src/components/Editor/Repeat/RepeatFreqSelect.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
 export default {
 	name: 'RepeatFreqSelect',
diff --git a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
index 57b65aacb..60b8bcd69 100644
--- a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
 import RepeatFirstLastSelect from './RepeatFirstLastSelect.vue'
 import RepeatOnTheSelect from './RepeatOnTheSelect.vue'
 
diff --git a/src/components/Editor/Repeat/RepeatOnTheSelect.vue b/src/components/Editor/Repeat/RepeatOnTheSelect.vue
index 16f44d04e..ee08dc35b 100644
--- a/src/components/Editor/Repeat/RepeatOnTheSelect.vue
+++ b/src/components/Editor/Repeat/RepeatOnTheSelect.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { getDayNames } from '@nextcloud/l10n'
 
 export default {
diff --git a/src/components/Editor/Resources/ResourceList.vue b/src/components/Editor/Resources/ResourceList.vue
index 2ce1069fc..84c59645e 100644
--- a/src/components/Editor/Resources/ResourceList.vue
+++ b/src/components/Editor/Resources/ResourceList.vue
@@ -56,14 +56,14 @@
 </template>
 
 <script>
-import { advancedPrincipalPropertySearch } from '../../../services/caldavService'
-import { checkResourceAvailability } from '../../../services/freeBusyService'
-import logger from '../../../utils/logger'
-import NoAttendeesView from '../NoAttendeesView'
-import ResourceListSearch from './ResourceListSearch'
-import ResourceListItem from './ResourceListItem'
-import OrganizerNoEmailError from '../OrganizerNoEmailError'
-import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attendee'
+import { advancedPrincipalPropertySearch } from '../../../services/caldavService.js'
+import { checkResourceAvailability } from '../../../services/freeBusyService.js'
+import logger from '../../../utils/logger.js'
+import NoAttendeesView from '../NoAttendeesView.vue'
+import ResourceListSearch from './ResourceListSearch.vue'
+import ResourceListItem from './ResourceListItem.vue'
+import OrganizerNoEmailError from '../OrganizerNoEmailError.vue'
+import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attendee.js'
 
 import MapMarker from 'vue-material-design-icons/MapMarker.vue'
 
diff --git a/src/components/Editor/Resources/ResourceListItem.vue b/src/components/Editor/Resources/ResourceListItem.vue
index 316716a22..c62e4178a 100644
--- a/src/components/Editor/Resources/ResourceListItem.vue
+++ b/src/components/Editor/Resources/ResourceListItem.vue
@@ -66,15 +66,15 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionCaption from '@nextcloud/vue/dist/Components/NcActionCaption'
-import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
-import AvatarParticipationStatus from '../AvatarParticipationStatus'
-import { removeMailtoPrefix } from '../../../utils/attendee'
-import logger from '../../../utils/logger'
-import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService'
-import { formatRoomType } from '../../../models/resourceProps'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionCaption from '@nextcloud/vue/dist/Components/NcActionCaption.js'
+import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
+import { removeMailtoPrefix } from '../../../utils/attendee.js'
+import logger from '../../../utils/logger.js'
+import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
+import { formatRoomType } from '../../../models/resourceProps.js'
 
 import Delete from 'vue-material-design-icons/Delete.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
diff --git a/src/components/Editor/Resources/ResourceListSearch.vue b/src/components/Editor/Resources/ResourceListSearch.vue
index 8233284d3..0b79e2b7e 100644
--- a/src/components/Editor/Resources/ResourceListSearch.vue
+++ b/src/components/Editor/Resources/ResourceListSearch.vue
@@ -81,16 +81,16 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import { checkResourceAvailability } from '../../../services/freeBusyService'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import { checkResourceAvailability } from '../../../services/freeBusyService.js'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import debounce from 'debounce'
-import logger from '../../../utils/logger'
-import { advancedPrincipalPropertySearch } from '../../../services/caldavService'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import ResourceSeatingCapacity from './ResourceSeatingCapacity'
-import ResourceRoomType from './ResourceRoomType'
+import logger from '../../../utils/logger.js'
+import { advancedPrincipalPropertySearch } from '../../../services/caldavService.js'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import ResourceSeatingCapacity from './ResourceSeatingCapacity.vue'
+import ResourceRoomType from './ResourceRoomType.vue'
 
 export default {
 	name: 'ResourceListSearch',
diff --git a/src/components/Editor/Resources/ResourceRoomType.vue b/src/components/Editor/Resources/ResourceRoomType.vue
index d8c40d902..18018969a 100644
--- a/src/components/Editor/Resources/ResourceRoomType.vue
+++ b/src/components/Editor/Resources/ResourceRoomType.vue
@@ -38,8 +38,8 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import { getAllRoomTypes } from '../../../models/resourceProps'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { getAllRoomTypes } from '../../../models/resourceProps.js'
 
 export default {
 	name: 'ResourceRoomType',
diff --git a/src/components/EmptyCalendar.vue b/src/components/EmptyCalendar.vue
index 41dde8563..39f69c2b2 100644
--- a/src/components/EmptyCalendar.vue
+++ b/src/components/EmptyCalendar.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 
 export default {
diff --git a/src/components/Shared/CalendarPicker.vue b/src/components/Shared/CalendarPicker.vue
index 2a03ae854..425693617 100644
--- a/src/components/Shared/CalendarPicker.vue
+++ b/src/components/Shared/CalendarPicker.vue
@@ -21,7 +21,7 @@
 	</Multiselect>
 </template>
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import CalendarPickerOption from './CalendarPickerOption.vue'
 
 export default {
diff --git a/src/components/Shared/CalendarPickerOption.vue b/src/components/Shared/CalendarPickerOption.vue
index ad9099272..bf905f947 100644
--- a/src/components/Shared/CalendarPickerOption.vue
+++ b/src/components/Shared/CalendarPickerOption.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 export default {
 	name: 'CalendarPickerOption',
diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue
index c4031c74b..10a1d1c0d 100644
--- a/src/components/Shared/DatePicker.vue
+++ b/src/components/Shared/DatePicker.vue
@@ -42,7 +42,7 @@
 		@change="change"
 		@pick="pickDate">
 		<template #icon-calendar>
-			<Button type="tertiary-no-background"
+			<NcButton type="tertiary-no-background"
 				@click.stop.prevent="toggleTimezonePopover"
 				@mousedown.stop.prevent="() => {}">
 				<template #icon>
@@ -52,8 +52,8 @@
 						:class="{ 'highlighted-timezone-icon': highlightTimezone }"
 						:size="20" />
 				</template>
-			</Button>
-			<Popover :shown.sync="showTimezonePopover"
+			</NcButton>
+			<Popover :open.sync="showTimezonePopover"
 				open-class="timezone-popover-wrapper">
 				<div class="timezone-popover-wrapper__title">
 					<strong>
@@ -67,26 +67,26 @@
 		</template>
 		<template v-if="!isAllDay"
 			#footer>
-			<Button v-if="!showTimePanel"
+			<NcButton v-if="!showTimePanel"
 				class="mx-btn mx-btn-text"
 				@click="toggleTimePanel">
 				{{ $t('calendar', 'Pick a time') }}
-			</Button>
-			<Button v-else
+			</NcButton>
+			<NcButton v-else
 				class="mx-btn mx-btn-text"
 				@click="toggleTimePanel">
 				{{ $t('calendar', 'Pick a date') }}
-			</Button>
+			</NcButton>
 		</template>
 	</DatetimePicker>
 </template>
 
 <script>
-import Button from '@nextcloud/vue/dist/Components/NcButton'
-import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker'
-import IconTimezone from 'vue-material-design-icons/Web'
-import IconNewCalendar from 'vue-material-design-icons/CalendarBlankOutline'
-import Popover from '@nextcloud/vue/dist/Components/NcPopover'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
+import IconTimezone from 'vue-material-design-icons/Web.vue'
+import IconNewCalendar from 'vue-material-design-icons/CalendarBlankOutline.vue'
+import Popover from '@nextcloud/vue/dist/Components/NcPopover.js'
 import {
 	getFirstDay,
 } from '@nextcloud/l10n'
@@ -96,13 +96,13 @@ import {
 	showError,
 } from '@nextcloud/dialogs'
 
-import TimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker'
+import TimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker.js'
 import { getLangConfigForVue2DatePicker } from '../../utils/localization.js'
 
 export default {
 	name: 'DatePicker',
 	components: {
-		Button,
+		NcButton,
 		DatetimePicker,
 		Popover,
 		TimezonePicker,
diff --git a/src/components/Shared/TimePicker.vue b/src/components/Shared/TimePicker.vue
index e4da482e9..662987067 100644
--- a/src/components/Shared/TimePicker.vue
+++ b/src/components/Shared/TimePicker.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker'
+import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
 import moment from '@nextcloud/moment'
 import { mapState } from 'vuex'
 import {
diff --git a/src/components/Shared/TimezoneSelect.vue b/src/components/Shared/TimezoneSelect.vue
index a27860df0..ece42abe0 100644
--- a/src/components/Shared/TimezoneSelect.vue
+++ b/src/components/Shared/TimezoneSelect.vue
@@ -14,7 +14,7 @@
 
 <script>
 import { getReadableTimezoneName, getSortedTimezoneList } from '@nextcloud/calendar-js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { translate as t } from '@nextcloud/l10n'
 
 import getTimezoneManager from '../../services/timezoneDataProviderService.js'
diff --git a/src/dashboard.js b/src/dashboard.js
index d824920eb..084762774 100644
--- a/src/dashboard.js
+++ b/src/dashboard.js
@@ -24,8 +24,8 @@ import Vue from 'vue'
 import { generateFilePath } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Dashboard from './views/Dashboard'
-import store from './store'
+import Dashboard from './views/Dashboard.vue'
+import store from './store/index.js'
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(getRequestToken())
diff --git a/src/fullcalendar/eventSources/eventSource.js b/src/fullcalendar/eventSources/eventSource.js
index 92abf3269..2526e26e2 100644
--- a/src/fullcalendar/eventSources/eventSource.js
+++ b/src/fullcalendar/eventSources/eventSource.js
@@ -22,7 +22,7 @@
 import {
 	generateTextColorForHex,
 } from '../../utils/color.js'
-import getTimezoneManager from '../../services/timezoneDataProviderService'
+import getTimezoneManager from '../../services/timezoneDataProviderService.js'
 import { getUnixTimestampFromDate } from '../../utils/date.js'
 import { eventSourceFunction } from './eventSourceFunction.js'
 import logger from '../../utils/logger.js'
diff --git a/src/fullcalendar/eventSources/freeBusyBlockedForAllEventSource.js b/src/fullcalendar/eventSources/freeBusyBlockedForAllEventSource.js
index 0e9f03497..40d30f56e 100644
--- a/src/fullcalendar/eventSources/freeBusyBlockedForAllEventSource.js
+++ b/src/fullcalendar/eventSources/freeBusyBlockedForAllEventSource.js
@@ -22,7 +22,7 @@
 import getTimezoneManager from '../../services/timezoneDataProviderService.js'
 import { AttendeeProperty, DateTimeValue } from '@nextcloud/calendar-js'
 import logger from '../../utils/logger.js'
-import { doFreeBusyRequest } from '../../utils/freebusy'
+import { doFreeBusyRequest } from '../../utils/freebusy.js'
 
 /**
  * Returns an event source for free-busy
diff --git a/src/fullcalendar/interaction/eventClick.js b/src/fullcalendar/interaction/eventClick.js
index c91c14460..def8f396c 100644
--- a/src/fullcalendar/interaction/eventClick.js
+++ b/src/fullcalendar/interaction/eventClick.js
@@ -22,7 +22,7 @@
 import {
 	getPrefixedRoute,
 	isPublicOrEmbeddedRoute,
-} from '../../utils/router'
+} from '../../utils/router.js'
 import { generateUrl } from '@nextcloud/router'
 import { translate as t } from '@nextcloud/l10n'
 import { showInfo } from '@nextcloud/dialogs'
diff --git a/src/fullcalendar/interaction/eventDrop.js b/src/fullcalendar/interaction/eventDrop.js
index 5d97503e4..8452d77ed 100644
--- a/src/fullcalendar/interaction/eventDrop.js
+++ b/src/fullcalendar/interaction/eventDrop.js
@@ -19,8 +19,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import { getDurationValueFromFullCalendarDuration } from '../duration'
-import getTimezoneManager from '../../services/timezoneDataProviderService'
+import { getDurationValueFromFullCalendarDuration } from '../duration.js'
+import getTimezoneManager from '../../services/timezoneDataProviderService.js'
 import logger from '../../utils/logger.js'
 import { getObjectAtRecurrenceId } from '../../utils/calendarObject.js'
 
diff --git a/src/fullcalendar/interaction/eventResize.js b/src/fullcalendar/interaction/eventResize.js
index 4bf594c7c..b909d0568 100644
--- a/src/fullcalendar/interaction/eventResize.js
+++ b/src/fullcalendar/interaction/eventResize.js
@@ -19,7 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import { getDurationValueFromFullCalendarDuration } from '../duration'
+import { getDurationValueFromFullCalendarDuration } from '../duration.js'
 import { getObjectAtRecurrenceId } from '../../utils/calendarObject.js'
 
 /**
diff --git a/src/fullcalendar/rendering/noEventsDidMount.js b/src/fullcalendar/rendering/noEventsDidMount.js
index 7314b20bb..96b6b4934 100644
--- a/src/fullcalendar/rendering/noEventsDidMount.js
+++ b/src/fullcalendar/rendering/noEventsDidMount.js
@@ -20,8 +20,8 @@
  *
  */
 import Vue from 'vue'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import CalendarIcon from 'vue-material-design-icons/CalendarBlank'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import CalendarIcon from 'vue-material-design-icons/CalendarBlank.vue'
 import { translate as t } from '@nextcloud/l10n'
 
 /**
diff --git a/src/fullcalendar/timezones/vtimezoneNamedTimezoneImpl.js b/src/fullcalendar/timezones/vtimezoneNamedTimezoneImpl.js
index 1499e2034..bfdbdb625 100644
--- a/src/fullcalendar/timezones/vtimezoneNamedTimezoneImpl.js
+++ b/src/fullcalendar/timezones/vtimezoneNamedTimezoneImpl.js
@@ -23,7 +23,7 @@ import {
 	NamedTimeZoneImpl,
 	createPlugin,
 } from '@fullcalendar/core'
-import getTimezoneManager from '../../services/timezoneDataProviderService'
+import getTimezoneManager from '../../services/timezoneDataProviderService.js'
 import logger from '../../utils/logger.js'
 
 /**
diff --git a/src/main.js b/src/main.js
index 678c5afa8..c2f6eae76 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,20 +23,20 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import 'core-js/stable'
+import 'core-js/stable/index.js'
 
 import '../css/calendar.scss'
 
 import Vue from 'vue'
-import App from './App'
-import router from './router'
-import store from './store'
+import App from './App.vue'
+import router from './router.js'
+import store from './store/index.js'
 import { sync } from 'vuex-router-sync'
 import { getRequestToken } from '@nextcloud/auth'
 import { linkTo } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import { translate, translatePlural } from '@nextcloud/l10n'
-import AppointmentConfig from './models/appointmentConfig'
+import AppointmentConfig from './models/appointmentConfig.js'
 import ClickOutside from 'vue-click-outside'
 import VueClipboard from 'vue-clipboard2'
 import VTooltip from 'v-tooltip'
diff --git a/src/mixins/EditorMixin.js b/src/mixins/EditorMixin.js
index 11a164a85..a732c381d 100644
--- a/src/mixins/EditorMixin.js
+++ b/src/mixins/EditorMixin.js
@@ -21,7 +21,7 @@
  *
  */
 
-import { getRFCProperties } from '../models/rfcProps'
+import { getRFCProperties } from '../models/rfcProps.js'
 import logger from '../utils/logger.js'
 import { getIllustrationForTitle } from '../utils/illustration.js'
 import { getPrefixedRoute } from '../utils/router.js'
@@ -32,7 +32,7 @@ import {
 	mapState,
 } from 'vuex'
 import { translate as t } from '@nextcloud/l10n'
-import { removeMailtoPrefix } from '../utils/attendee'
+import { removeMailtoPrefix } from '../utils/attendee.js'
 
 /**
  * This is a mixin for the editor. It contains common Vue stuff, that is
diff --git a/src/router.js b/src/router.js
index 7c5a4287f..06c62be2f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -24,9 +24,9 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import { getRootUrl, generateUrl } from '@nextcloud/router'
 
-import Calendar from './views/Calendar'
-import EditSimple from './views/EditSimple'
-import EditSidebar from './views/EditSidebar'
+import Calendar from './views/Calendar.vue'
+import EditSimple from './views/EditSimple.vue'
+import EditSidebar from './views/EditSidebar.vue'
 import {
 	getDefaultEndDateForNewEvent,
 	getDefaultStartDateForNewEvent,
diff --git a/src/services/appointmentConfigService.js b/src/services/appointmentConfigService.js
index f112d2cb0..546cb2afe 100644
--- a/src/services/appointmentConfigService.js
+++ b/src/services/appointmentConfigService.js
@@ -22,8 +22,8 @@
 
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
-import AppointmentConfig from '../models/appointmentConfig'
-import logger from '../utils/logger'
+import AppointmentConfig from '../models/appointmentConfig.js'
+import logger from '../utils/logger.js'
 
 /**
  * Create a new appointment config in the backend
diff --git a/src/services/freeBusyService.js b/src/services/freeBusyService.js
index b7c47e71c..0c9376e69 100644
--- a/src/services/freeBusyService.js
+++ b/src/services/freeBusyService.js
@@ -21,8 +21,8 @@
  */
 
 import { AttendeeProperty } from '@nextcloud/calendar-js'
-import { addMailtoPrefix, removeMailtoPrefix } from '../utils/attendee'
-import { doFreeBusyRequest } from '../utils/freebusy'
+import { addMailtoPrefix, removeMailtoPrefix } from '../utils/attendee.js'
+import { doFreeBusyRequest } from '../utils/freebusy.js'
 
 /**
  * Check resource availability using a free busy request
diff --git a/src/store/appointmentConfigs.js b/src/store/appointmentConfigs.js
index 00d82026c..dccc88484 100644
--- a/src/store/appointmentConfigs.js
+++ b/src/store/appointmentConfigs.js
@@ -21,8 +21,8 @@
  */
 
 import Vue from 'vue'
-import { createConfig, deleteConfig, updateConfig } from '../services/appointmentConfigService'
-import logger from '../utils/logger'
+import { createConfig, deleteConfig, updateConfig } from '../services/appointmentConfigService.js'
+import logger from '../utils/logger.js'
 
 const state = {
 	configs: {},
diff --git a/src/store/calendarObjectInstance.js b/src/store/calendarObjectInstance.js
index d43260af0..7e753a118 100644
--- a/src/store/calendarObjectInstance.js
+++ b/src/store/calendarObjectInstance.js
@@ -20,7 +20,7 @@
  *
  */
 import Vue from 'vue'
-import getTimezoneManager from '../services/timezoneDataProviderService'
+import getTimezoneManager from '../services/timezoneDataProviderService.js'
 import {
 	getDateFromDateTimeValue,
 } from '../utils/date.js'
@@ -44,7 +44,7 @@ import { mapAlarmComponentToAlarmObject } from '../models/alarm.js'
 import { getObjectAtRecurrenceId } from '../utils/calendarObject.js'
 import logger from '../utils/logger.js'
 import settings from './settings.js'
-import { getRFCProperties } from '../models/rfcProps'
+import { getRFCProperties } from '../models/rfcProps.js'
 
 const state = {
 	isNew: null,
diff --git a/src/store/calendarObjects.js b/src/store/calendarObjects.js
index 98a4886b8..9919dc995 100644
--- a/src/store/calendarObjects.js
+++ b/src/store/calendarObjects.js
@@ -24,7 +24,7 @@
  *
  */
 import Vue from 'vue'
-import { mapCalendarJsToCalendarObject } from '../models/calendarObject'
+import { mapCalendarJsToCalendarObject } from '../models/calendarObject.js'
 import logger from '../utils/logger.js'
 import {
 	createEvent,
diff --git a/src/store/calendars.js b/src/store/calendars.js
index cefe9a5d5..bbb5f2721 100644
--- a/src/store/calendars.js
+++ b/src/store/calendars.js
@@ -35,9 +35,9 @@ import {
 	findAllDeletedCalendars,
 	findPublicCalendarsByTokens,
 } from '../services/caldavService.js'
-import { mapCDavObjectToCalendarObject } from '../models/calendarObject'
+import { mapCDavObjectToCalendarObject } from '../models/calendarObject.js'
 import { dateFactory, getUnixTimestampFromDate } from '../utils/date.js'
-import { getDefaultCalendarObject, mapDavCollectionToCalendar } from '../models/calendar'
+import { getDefaultCalendarObject, mapDavCollectionToCalendar } from '../models/calendar.js'
 import pLimit from 'p-limit'
 import { uidToHexColor } from '../utils/color.js'
 import { translate as t } from '@nextcloud/l10n'
diff --git a/src/store/index.js b/src/store/index.js
index 400b97736..f9da6a842 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -26,17 +26,17 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import calendarObjectInstance from './calendarObjectInstance'
-import calendarObjects from './calendarObjects'
+import calendarObjectInstance from './calendarObjectInstance.js'
+import calendarObjects from './calendarObjects.js'
 import calendars from './calendars.js'
 import contacts from './contacts.js'
-import davRestrictions from './davRestrictions'
+import davRestrictions from './davRestrictions.js'
 import fetchedTimeRanges from './fetchedTimeRanges.js'
-import importFiles from './importFiles'
-import importState from './importState'
+import importFiles from './importFiles.js'
+import importState from './importState.js'
 import principals from './principals.js'
 import settings from './settings.js'
-import appointmentConfigs from './appointmentConfigs'
+import appointmentConfigs from './appointmentConfigs.js'
 
 Vue.use(Vuex)
 
diff --git a/src/store/principals.js b/src/store/principals.js
index 062b74b9a..d5a01894b 100644
--- a/src/store/principals.js
+++ b/src/store/principals.js
@@ -28,7 +28,7 @@ import logger from '../utils/logger.js'
 import {
 	getDefaultPrincipalObject,
 	mapDavToPrincipal,
-} from '../models/principal'
+} from '../models/principal.js'
 
 const state = {
 	principals: [],
diff --git a/src/store/settings.js b/src/store/settings.js
index 94fb0d69d..bf6305b9e 100644
--- a/src/store/settings.js
+++ b/src/store/settings.js
@@ -20,12 +20,12 @@
  *
  */
 import { enableBirthdayCalendar } from '../services/caldavService.js'
-import { mapDavCollectionToCalendar } from '../models/calendar'
-import { detectTimezone } from '../services/timezoneDetectionService'
+import { mapDavCollectionToCalendar } from '../models/calendar.js'
+import { detectTimezone } from '../services/timezoneDetectionService.js'
 import { setConfig as setCalendarJsConfig } from '@nextcloud/calendar-js'
 import { setConfig } from '../services/settings.js'
 import { logInfo } from '../utils/logger.js'
-import getTimezoneManager from '../services/timezoneDataProviderService'
+import getTimezoneManager from '../services/timezoneDataProviderService.js'
 
 const state = {
 	// env
diff --git a/src/utils/freebusy.js b/src/utils/freebusy.js
index 6905d17fc..224dfa031 100644
--- a/src/utils/freebusy.js
+++ b/src/utils/freebusy.js
@@ -23,7 +23,7 @@
  */
 
 import { createFreeBusyRequest, getParserManager } from '@nextcloud/calendar-js'
-import { findSchedulingOutbox } from '../services/caldavService'
+import { findSchedulingOutbox } from '../services/caldavService.js'
 
 /**
  * Gets the corresponding color for a given Free/Busy type
diff --git a/src/views/Appointments/Booking.vue b/src/views/Appointments/Booking.vue
index ec8f9138b..68a75af13 100644
--- a/src/views/Appointments/Booking.vue
+++ b/src/views/Appointments/Booking.vue
@@ -82,15 +82,15 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
 import jstz from 'jstz'
-import TimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker'
+import TimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker.js'
 
-import AppointmentSlot from '../../components/Appointments/AppointmentSlot'
-import { bookSlot, findSlots } from '../../services/appointmentService'
-import AppointmentDetails from '../../components/Appointments/AppointmentDetails'
-import AppointmentBookingConfirmation from '../../components/Appointments/AppointmentBookingConfirmation'
+import AppointmentSlot from '../../components/Appointments/AppointmentSlot.vue'
+import { bookSlot, findSlots } from '../../services/appointmentService.js'
+import AppointmentDetails from '../../components/Appointments/AppointmentDetails.vue'
+import AppointmentBookingConfirmation from '../../components/Appointments/AppointmentBookingConfirmation.vue'
 
 export default {
 	name: 'Booking',
diff --git a/src/views/Appointments/Overview.vue b/src/views/Appointments/Overview.vue
index da4b8b257..086a3ea77 100644
--- a/src/views/Appointments/Overview.vue
+++ b/src/views/Appointments/Overview.vue
@@ -59,10 +59,10 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import { generateUrl } from '@nextcloud/router'
-import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck'
+import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
 import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlank.vue'
 
 export default {
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index 4c13b3c84..73c9ff768 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -20,7 +20,7 @@
   -->
 
 <template>
-	<Content app-name="calendar" :class="classNames">
+	<NcContent app-name="calendar" :class="classNames">
 		<AppNavigation v-if="!isEmbedded && !showEmptyCalendarScreen">
 			<!-- Date Picker, View Buttons, Today Button -->
 			<AppNavigationHeader :is-public="!isAuthenticatedUser" />
@@ -56,15 +56,15 @@
 		</AppContent>
 		<!-- Edit modal -->
 		<router-view />
-	</Content>
+	</NcContent>
 </template>
 
 <script>
 // Import vue components
-import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
-import AppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import Content from '@nextcloud/vue/dist/Components/NcContent'
+import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import AppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer.js'
+import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import AppNavigationHeader from '../components/AppNavigation/AppNavigationHeader.vue'
 import CalendarList from '../components/AppNavigation/CalendarList.vue'
 import Settings from '../components/AppNavigation/Settings.vue'
@@ -86,8 +86,8 @@ import {
 	getUnixTimestampFromDate,
 	getYYYYMMDDFromFirstdayParam,
 } from '../utils/date.js'
-import getTimezoneManager from '../services/timezoneDataProviderService'
-import logger from '../utils/logger'
+import getTimezoneManager from '../services/timezoneDataProviderService.js'
+import logger from '../utils/logger.js'
 import {
 	mapGetters,
 	mapState,
@@ -98,8 +98,8 @@ import {
 	showWarning,
 } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/styles/toast.scss'
-import Trashbin from '../components/AppNavigation/CalendarList/Trashbin'
-import AppointmentConfigList from '../components/AppNavigation/AppointmentConfigList'
+import Trashbin from '../components/AppNavigation/CalendarList/Trashbin.vue'
+import AppointmentConfigList from '../components/AppNavigation/AppointmentConfigList.vue'
 
 export default {
 	name: 'Calendar',
@@ -111,7 +111,7 @@ export default {
 		Settings,
 		CalendarList,
 		AppNavigationHeader,
-		Content,
+		NcContent,
 		AppContent,
 		AppNavigation,
 		AppNavigationSpacer,
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index a5e85833c..e08a482e6 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -67,17 +67,17 @@
 
 <script>
 import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import EmptyCalendar from 'vue-material-design-icons/CalendarBlankOutline'
-import IconCheck from 'vue-material-design-icons/Check'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import EmptyCalendar from 'vue-material-design-icons/CalendarBlankOutline.vue'
+import IconCheck from 'vue-material-design-icons/Check.vue'
 import { loadState } from '@nextcloud/initial-state'
 import moment from '@nextcloud/moment'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { imagePath, generateUrl } from '@nextcloud/router'
-import { initializeClientForUserView } from '../services/caldavService'
-import { dateFactory } from '../utils/date'
+import { initializeClientForUserView } from '../services/caldavService.js'
+import { dateFactory } from '../utils/date.js'
 import pLimit from 'p-limit'
-import { eventSourceFunction } from '../fullcalendar/eventSources/eventSourceFunction'
+import { eventSourceFunction } from '../fullcalendar/eventSources/eventSourceFunction.js'
 import loadMomentLocalization from '../utils/moment.js'
 import { DateTimeValue } from '@nextcloud/calendar-js'
 import { mapGetters } from 'vuex'
diff --git a/src/views/EditSidebar.vue b/src/views/EditSidebar.vue
index 52d0e553b..01e69fb3a 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditSidebar.vue
@@ -224,31 +224,31 @@
 	</AppSidebar>
 </template>
 <script>
-import AppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
-import AppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import AppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
+import AppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
 import { mapState } from 'vuex'
 
-import AlarmList from '../components/Editor/Alarm/AlarmList'
+import AlarmList from '../components/Editor/Alarm/AlarmList.vue'
 
-import InviteesList from '../components/Editor/Invitees/InviteesList'
-import PropertyCalendarPicker from '../components/Editor/Properties/PropertyCalendarPicker'
-import PropertySelect from '../components/Editor/Properties/PropertySelect'
-import PropertyText from '../components/Editor/Properties/PropertyText'
-import PropertyTitleTimePicker from '../components/Editor/Properties/PropertyTitleTimePicker'
+import InviteesList from '../components/Editor/Invitees/InviteesList.vue'
+import PropertyCalendarPicker from '../components/Editor/Properties/PropertyCalendarPicker.vue'
+import PropertySelect from '../components/Editor/Properties/PropertySelect.vue'
+import PropertyText from '../components/Editor/Properties/PropertyText.vue'
+import PropertyTitleTimePicker from '../components/Editor/Properties/PropertyTitleTimePicker.vue'
 import Repeat from '../components/Editor/Repeat/Repeat.vue'
 
-import EditorMixin from '../mixins/EditorMixin'
+import EditorMixin from '../mixins/EditorMixin.js'
 import IllustrationHeader from '../components/Editor/IllustrationHeader.vue'
 import moment from '@nextcloud/moment'
 import SaveButtons from '../components/Editor/SaveButtons.vue'
 import PropertySelectMultiple from '../components/Editor/Properties/PropertySelectMultiple.vue'
 import PropertyColor from '../components/Editor/Properties/PropertyColor.vue'
-import ResourceList from '../components/Editor/Resources/ResourceList'
-import InvitationResponseButtons from '../components/Editor/InvitationResponseButtons'
+import ResourceList from '../components/Editor/Resources/ResourceList.vue'
+import InvitationResponseButtons from '../components/Editor/InvitationResponseButtons.vue'
 
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
diff --git a/src/views/EditSimple.vue b/src/views/EditSimple.vue
index fe55b3933..f5a83d905 100644
--- a/src/views/EditSimple.vue
+++ b/src/views/EditSimple.vue
@@ -161,12 +161,12 @@
 	</Popover>
 </template>
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import Popover from '@nextcloud/vue/dist/Components/NcPopover'
-import EditorMixin from '../mixins/EditorMixin'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import Popover from '@nextcloud/vue/dist/Components/NcPopover.js'
+import EditorMixin from '../mixins/EditorMixin.js'
 import IllustrationHeader from '../components/Editor/IllustrationHeader.vue'
 import PropertyTitle from '../components/Editor/Properties/PropertyTitle.vue'
 import PropertyTitleTimePicker
@@ -179,7 +179,7 @@ import PopoverLoadingIndicator
 	from '../components/Popover/PopoverLoadingIndicator.vue'
 import { getPrefixedRoute } from '../utils/router.js'
 import InvitationResponseButtons
-	from '../components/Editor/InvitationResponseButtons'
+	from '../components/Editor/InvitationResponseButtons.vue'
 
 import ArrowExpand from 'vue-material-design-icons/ArrowExpand.vue'
 import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'