From baeeae244614586bbc3c1efd3233f26a84ec0a01 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Mon, 14 Aug 2023 16:10:00 +0200
Subject: [PATCH] perf(bundles): refactor @nextcloud/vue imports to use the esm
 bundle

Bundle sizes (npm run build):
Before: 8,5M js/calendar-main.js
After:  5,6M js/calendar-main.js

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 .../AppNavigationHeaderDatePicker.vue              |  2 +-
 .../AppNavigationHeaderNewEvent.vue                |  2 +-
 .../AppNavigationHeaderTodayButton.vue             |  2 +-
 .../AppNavigationHeaderViewMenu.vue                |  6 ++++--
 .../AppNavigation/AppointmentConfigList.vue        |  6 ++++--
 .../AppointmentConfigListItem.vue                  |  8 +++++---
 .../CalendarList/CalendarListItem.vue              | 14 ++++++++------
 .../AppNavigation/CalendarList/CalendarListNew.vue | 12 +++++++-----
 .../CalendarList/PublicCalendarListItem.vue        | 14 ++++++++------
 .../AppNavigation/CalendarList/Trashbin.vue        | 14 ++++++++------
 src/components/AppNavigation/EditCalendarModal.vue |  4 +---
 .../EditCalendarModal/InternalLink.vue             |  3 +--
 .../EditCalendarModal/PublishCalendar.vue          |  5 +----
 .../AppNavigation/EditCalendarModal/ShareItem.vue  |  4 +---
 .../EditCalendarModal/SharingSearch.vue            |  2 +-
 .../EmbedHeader/EmbedHeaderTodayButton.vue         |  2 +-
 .../EmbedHeader/EmbedHeaderViewButtons.vue         |  2 +-
 .../AppNavigation/EmbedTopNavigation.vue           |  8 +++++---
 src/components/AppNavigation/Settings.vue          | 12 +++++++-----
 .../AppNavigation/Settings/ImportScreen.vue        |  3 +--
 .../Settings/SettingsTimezoneSelect.vue            |  2 +-
 .../AppNavigation/Settings/ShortcutOverview.vue    |  2 +-
 src/components/AppointmentConfigModal.vue          |  4 +---
 .../AppointmentConfigModal/Confirmation.vue        |  3 +--
 .../NoEmailAddressWarning.vue                      |  2 +-
 .../AppointmentBookingConfirmation.vue             |  2 +-
 src/components/Appointments/AppointmentDetails.vue | 10 ++++++----
 src/components/Appointments/AppointmentSlot.vue    |  2 +-
 src/components/Editor/Alarm/AlarmListItem.vue      | 10 ++++++----
 .../Editor/Alarm/AlarmTimeUnitSelect.vue           |  2 +-
 .../Editor/AvatarParticipationStatus.vue           |  2 +-
 src/components/Editor/FreeBusy/FreeBusy.vue        |  2 +-
 .../Editor/InvitationResponseButtons.vue           |  8 +++++---
 src/components/Editor/Invitees/InviteesList.vue    |  2 +-
 .../Editor/Invitees/InviteesListItem.vue           | 10 ++++++----
 .../Editor/Invitees/InviteesListSearch.vue         |  6 ++++--
 src/components/Editor/Properties/PropertyColor.vue | 10 ++++++----
 .../Editor/Properties/PropertySelect.vue           |  2 +-
 .../Editor/Properties/PropertySelectMultiple.vue   |  2 +-
 src/components/Editor/Properties/PropertyText.vue  |  4 ++--
 src/components/Editor/Repeat/Repeat.vue            |  3 +--
 src/components/Editor/Repeat/RepeatEndRepeat.vue   |  2 +-
 .../Editor/Repeat/RepeatFirstLastSelect.vue        |  2 +-
 .../Editor/Repeat/RepeatFreqMonthlyOptions.vue     |  6 ++++--
 src/components/Editor/Repeat/RepeatFreqSelect.vue  |  2 +-
 .../Editor/Repeat/RepeatFreqWeeklyOptions.vue      |  2 +-
 .../Editor/Repeat/RepeatFreqYearlyOptions.vue      |  6 ++++--
 src/components/Editor/Repeat/RepeatOnTheSelect.vue |  2 +-
 .../Editor/Resources/ResourceListItem.vue          | 10 ++++++----
 .../Editor/Resources/ResourceListSearch.vue        | 10 ++++++----
 .../Editor/Resources/ResourceRoomType.vue          |  2 +-
 src/components/Editor/SaveButtons.vue              |  2 +-
 src/components/EmptyCalendar.vue                   |  2 +-
 src/components/Shared/CalendarPicker.vue           |  2 +-
 src/components/Shared/CalendarPickerOption.vue     |  2 +-
 src/components/Shared/DatePicker.vue               | 10 ++++++----
 src/components/Shared/TimePicker.vue               |  2 +-
 src/components/Shared/TimezoneSelect.vue           |  2 +-
 .../Subscription/HolidaySubscriptionPicker.vue     |  3 +--
 src/fullcalendar/rendering/noEventsDidMount.js     |  2 +-
 src/views/Appointments/Booking.vue                 | 10 ++++++----
 src/views/Appointments/Overview.vue                |  6 ++++--
 src/views/Calendar.vue                             | 10 ++++++----
 src/views/Dashboard.vue                            |  3 +--
 src/views/EditSimple.vue                           | 12 +++++++-----
 65 files changed, 180 insertions(+), 147 deletions(-)

diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
index 5cceaf6508..b0eef12907 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
@@ -69,7 +69,7 @@ import formatDateRange from '../../../filters/dateRangeFormat.js'
 import DatePicker from '../../Shared/DatePicker.vue'
 import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationHeaderDatePicker',
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue
index d9135d629d..aac057807a 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue
@@ -36,7 +36,7 @@
 
 <script>
 import Plus from 'vue-material-design-icons/Plus.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationHeaderNewEvent',
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
index 452da5cb9f..45f1687bcd 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationHeaderTodayButton',
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue
index 7426b11de7..2fcc77fb23 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue
@@ -39,8 +39,10 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+} from '@nextcloud/vue'
 
 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 e0adfb9fbc..f1a74b21cd 100644
--- a/src/components/AppNavigation/AppointmentConfigList.vue
+++ b/src/components/AppNavigation/AppointmentConfigList.vue
@@ -60,8 +60,10 @@
 
 <script>
 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 {
+	NcAppNavigationCaption as AppNavigationCaption,
+	NcActionButton as ActionButton,
+} from '@nextcloud/vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import AppointmentConfigModal from '../AppointmentConfigModal.vue'
 import AppointmentConfig from '../../models/appointmentConfig.js'
diff --git a/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue b/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue
index 3fde84d6c3..d8dcbe8dca 100644
--- a/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue
+++ b/src/components/AppNavigation/AppointmentConfigList/AppointmentConfigListItem.vue
@@ -59,9 +59,11 @@
 </template>
 
 <script>
-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 {
+	NcAppNavigationItem as AppNavigationItem,
+	NcActionButton as ActionButton,
+	NcActionLink as ActionLink,
+} from '@nextcloud/vue'
 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'
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
index 6fab3c35cb..4b8a0421bb 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
@@ -91,12 +91,14 @@
 </template>
 
 <script>
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
-import NcActionCaption from '@nextcloud/vue/dist/Components/NcActionCaption.js'
+import {
+	NcAvatar,
+	NcActionButton as ActionButton,
+	NcAppNavigationItem as AppNavigationItem,
+	NcActionText,
+	NcActionSeparator,
+	NcActionCaption,
+} from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle.vue'
 import CheckboxBlankCircleOutline from 'vue-material-design-icons/CheckboxBlankCircleOutline.vue'
diff --git a/src/components/AppNavigation/CalendarList/CalendarListNew.vue b/src/components/AppNavigation/CalendarList/CalendarListNew.vue
index 60ac1c94a4..1b21b91d41 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListNew.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListNew.vue
@@ -106,11 +106,13 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import ActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import {
+	NcActionButton as ActionButton,
+	NcActionInput as ActionInput,
+	NcActionSeparator as ActionSeparator,
+	NcActionText as ActionText,
+	NcAppNavigationItem as AppNavigationItem,
+} from '@nextcloud/vue'
 import {
 	showError,
 } from '@nextcloud/dialogs'
diff --git a/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue b/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
index 477d3e04e9..75d5f8f4f6 100644
--- a/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
+++ b/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
@@ -74,12 +74,14 @@
 </template>
 
 <script>
-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 {
+	NcAvatar as Avatar,
+	NcActionButton as ActionButton,
+	NcActionLink as ActionLink,
+	NcActionText as ActionText,
+	NcAppNavigationIconBullet as AppNavigationIconBullet,
+	NcAppNavigationItem as AppNavigationItem,
+} from '@nextcloud/vue'
 import {
 	generateRemoteUrl,
 } from '@nextcloud/router'
diff --git a/src/components/AppNavigation/CalendarList/Trashbin.vue b/src/components/AppNavigation/CalendarList/Trashbin.vue
index 309f12879f..b9fa80b363 100644
--- a/src/components/AppNavigation/CalendarList/Trashbin.vue
+++ b/src/components/AppNavigation/CalendarList/Trashbin.vue
@@ -110,18 +110,20 @@
 </template>
 
 <script>
-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 {
+	NcAppNavigationItem as AppNavigationItem,
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcModal as Modal,
+	NcEmptyContent as EmptyContent,
+	NcButton,
+} from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import logger from '../../../utils/logger.js'
 import { showError } from '@nextcloud/dialogs'
 import { mapGetters } from 'vuex'
 import Moment from './Moment.vue'
 import { uidToHexColor } from '../../../utils/color.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import Delete from 'vue-material-design-icons/Delete.vue'
 
diff --git a/src/components/AppNavigation/EditCalendarModal.vue b/src/components/AppNavigation/EditCalendarModal.vue
index 0ff647218a..4250dd8bd8 100644
--- a/src/components/AppNavigation/EditCalendarModal.vue
+++ b/src/components/AppNavigation/EditCalendarModal.vue
@@ -88,9 +88,7 @@
 </template>
 
 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
-import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcModal, NcColorPicker, NcButton } from '@nextcloud/vue'
 import PublishCalendar from './EditCalendarModal/PublishCalendar.vue'
 import SharingSearch from './EditCalendarModal/SharingSearch.vue'
 import ShareItem from './EditCalendarModal/ShareItem.vue'
diff --git a/src/components/AppNavigation/EditCalendarModal/InternalLink.vue b/src/components/AppNavigation/EditCalendarModal/InternalLink.vue
index de8cdc3cd2..94a35958e9 100644
--- a/src/components/AppNavigation/EditCalendarModal/InternalLink.vue
+++ b/src/components/AppNavigation/EditCalendarModal/InternalLink.vue
@@ -45,8 +45,7 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
diff --git a/src/components/AppNavigation/EditCalendarModal/PublishCalendar.vue b/src/components/AppNavigation/EditCalendarModal/PublishCalendar.vue
index a04ec910fa..1f8703f204 100644
--- a/src/components/AppNavigation/EditCalendarModal/PublishCalendar.vue
+++ b/src/components/AppNavigation/EditCalendarModal/PublishCalendar.vue
@@ -139,10 +139,7 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import { NcActions, NcActionButton, NcActionInput, NcActionText } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import {
 	generateRemoteUrl,
diff --git a/src/components/AppNavigation/EditCalendarModal/ShareItem.vue b/src/components/AppNavigation/EditCalendarModal/ShareItem.vue
index 0f346eba2f..50ea02b116 100644
--- a/src/components/AppNavigation/EditCalendarModal/ShareItem.vue
+++ b/src/components/AppNavigation/EditCalendarModal/ShareItem.vue
@@ -52,9 +52,7 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import { NcActions, NcActionButton, NcAvatar } from '@nextcloud/vue'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import IconCircle from '../../Icons/IconCircles.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
diff --git a/src/components/AppNavigation/EditCalendarModal/SharingSearch.vue b/src/components/AppNavigation/EditCalendarModal/SharingSearch.vue
index 217f2d9aca..7eb6c9238f 100644
--- a/src/components/AppNavigation/EditCalendarModal/SharingSearch.vue
+++ b/src/components/AppNavigation/EditCalendarModal/SharingSearch.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import { NcSelect } from '@nextcloud/vue'
 import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
 import HttpClient from '@nextcloud/axios'
 import debounce from 'debounce'
diff --git a/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue b/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue
index 38da38e436..5cf30b76d2 100644
--- a/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue
+++ b/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue
@@ -33,7 +33,7 @@
 
 <script>
 import moment from '@nextcloud/moment'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'EmbedHeaderTodayButton',
diff --git a/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue b/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue
index fd53f8b841..1239d10a94 100644
--- a/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue
+++ b/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'EmbedHeaderViewButtons',
diff --git a/src/components/AppNavigation/EmbedTopNavigation.vue b/src/components/AppNavigation/EmbedTopNavigation.vue
index 551c3cd1dc..8e61d874f3 100644
--- a/src/components/AppNavigation/EmbedTopNavigation.vue
+++ b/src/components/AppNavigation/EmbedTopNavigation.vue
@@ -41,9 +41,11 @@
 </template>
 
 <script>
-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 {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcActionLink as ActionLink,
+} from '@nextcloud/vue'
 import {
 	mapGetters,
 } from 'vuex'
diff --git a/src/components/AppNavigation/Settings.vue b/src/components/AppNavigation/Settings.vue
index a720e0dcee..fcb1e65b4a 100644
--- a/src/components/AppNavigation/Settings.vue
+++ b/src/components/AppNavigation/Settings.vue
@@ -117,11 +117,13 @@
 </template>
 
 <script>
-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 {
+	NcActionButton as ActionButton,
+	NcActionCheckbox as ActionCheckbox,
+	NcActionLink as ActionLink,
+	NcAppNavigationSettings as AppNavigationSettings,
+	NcMultiselect as Multiselect,
+} from '@nextcloud/vue'
 import {
 	generateRemoteUrl,
 	generateUrl,
diff --git a/src/components/AppNavigation/Settings/ImportScreen.vue b/src/components/AppNavigation/Settings/ImportScreen.vue
index 55323736b3..5bcac6bea6 100644
--- a/src/components/AppNavigation/Settings/ImportScreen.vue
+++ b/src/components/AppNavigation/Settings/ImportScreen.vue
@@ -54,9 +54,8 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton, NcModal as Modal } from '@nextcloud/vue'
 import ImportScreenRow from './ImportScreenRow.vue'
-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 0b9815e717..8f98ff6885 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.js'
+import { NcTimezonePicker as TimezonePicker } from '@nextcloud/vue'
 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 3124064e9f..acda128161 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.js'
+import { NcModal as Modal } from '@nextcloud/vue'
 
 export default {
 	components: {
diff --git a/src/components/AppointmentConfigModal.vue b/src/components/AppointmentConfigModal.vue
index a461c6bd1f..2d35cd0f88 100644
--- a/src/components/AppointmentConfigModal.vue
+++ b/src/components/AppointmentConfigModal.vue
@@ -147,8 +147,7 @@
 
 <script>
 import { CalendarAvailability } from '@nextcloud/calendar-availability-vue'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import { NcModal as Modal, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import TextInput from './AppointmentConfigModal/TextInput.vue'
 import TextArea from './AppointmentConfigModal/TextArea.vue'
 import AppointmentConfig from '../models/appointmentConfig.js'
@@ -161,7 +160,6 @@ import CheckedDurationSelect from './AppointmentConfigModal/CheckedDurationSelec
 import VisibilitySelect from './AppointmentConfigModal/VisibilitySelect.vue'
 import logger from '../utils/logger.js'
 import Confirmation from './AppointmentConfigModal/Confirmation.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'AppointmentConfigModal',
diff --git a/src/components/AppointmentConfigModal/Confirmation.vue b/src/components/AppointmentConfigModal/Confirmation.vue
index e32c4dd85c..44d7edb8ff 100644
--- a/src/components/AppointmentConfigModal/Confirmation.vue
+++ b/src/components/AppointmentConfigModal/Confirmation.vue
@@ -43,8 +43,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import { NcButton, NcEmptyContent as EmptyContent } from '@nextcloud/vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import AppointmentConfig from '../../models/appointmentConfig.js'
 
diff --git a/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue b/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue
index f3a96392fa..b1566705a2 100644
--- a/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue
+++ b/src/components/AppointmentConfigModal/NoEmailAddressWarning.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import { NcAppNavigationItem as AppNavigationItem } from '@nextcloud/vue'
 import AlertCircleIcon from 'vue-material-design-icons/AlertCircle.vue'
 import { generateUrl } from '@nextcloud/router'
 
diff --git a/src/components/Appointments/AppointmentBookingConfirmation.vue b/src/components/Appointments/AppointmentBookingConfirmation.vue
index ae39f4a796..9d151947b6 100644
--- a/src/components/Appointments/AppointmentBookingConfirmation.vue
+++ b/src/components/Appointments/AppointmentBookingConfirmation.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import { NcEmptyContent as EmptyContent } from '@nextcloud/vue'
 import EmailIcon from 'vue-material-design-icons/Email.vue'
 
 export default {
diff --git a/src/components/Appointments/AppointmentDetails.vue b/src/components/Appointments/AppointmentDetails.vue
index 64ac25de3c..a3bba8cccf 100644
--- a/src/components/Appointments/AppointmentDetails.vue
+++ b/src/components/Appointments/AppointmentDetails.vue
@@ -68,10 +68,12 @@
 	</Modal>
 </template>
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import {
+	NcAvatar as Avatar,
+	NcButton,
+	NcLoadingIcon,
+	NcModal as Modal,
+} from '@nextcloud/vue'
 import autosize from '../../directives/autosize.js'
 
 import { timeStampToLocaleTime } from '../../utils/localeTime.js'
diff --git a/src/components/Appointments/AppointmentSlot.vue b/src/components/Appointments/AppointmentSlot.vue
index eb984e59a4..612f8cdbac 100644
--- a/src/components/Appointments/AppointmentSlot.vue
+++ b/src/components/Appointments/AppointmentSlot.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 import { timeStampToLocaleTime } from '../../utils/localeTime.js'
 
 export default {
diff --git a/src/components/Editor/Alarm/AlarmListItem.vue b/src/components/Editor/Alarm/AlarmListItem.vue
index 360d7cb58f..b8264cc044 100644
--- a/src/components/Editor/Alarm/AlarmListItem.vue
+++ b/src/components/Editor/Alarm/AlarmListItem.vue
@@ -152,10 +152,12 @@
 </template>
 
 <script>
-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 {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcActionRadio as ActionRadio,
+	NcActionSeparator as ActionSeparator,
+} from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import ClickOutside from 'vue-click-outside'
 import formatAlarm from '../../../filters/alarmFormat.js'
diff --git a/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue b/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
index 568993c045..7f8c3995b3 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.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'AlarmTimeUnitSelect',
diff --git a/src/components/Editor/AvatarParticipationStatus.vue b/src/components/Editor/AvatarParticipationStatus.vue
index d335437321..ab4da93925 100644
--- a/src/components/Editor/AvatarParticipationStatus.vue
+++ b/src/components/Editor/AvatarParticipationStatus.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import { NcAvatar as Avatar } from '@nextcloud/vue'
 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'
diff --git a/src/components/Editor/FreeBusy/FreeBusy.vue b/src/components/Editor/FreeBusy/FreeBusy.vue
index e7eb796881..6e7414e464 100644
--- a/src/components/Editor/FreeBusy/FreeBusy.vue
+++ b/src/components/Editor/FreeBusy/FreeBusy.vue
@@ -71,7 +71,7 @@ import {
 	mapGetters,
 	mapState,
 } from 'vuex'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
+import { NcModal as Modal } from '@nextcloud/vue'
 import DatePicker from '../../Shared/DatePicker.vue'
 import { getColorForFBType } from '../../../utils/freebusy.js'
 
diff --git a/src/components/Editor/InvitationResponseButtons.vue b/src/components/Editor/InvitationResponseButtons.vue
index 38bf808120..0d0571ac86 100644
--- a/src/components/Editor/InvitationResponseButtons.vue
+++ b/src/components/Editor/InvitationResponseButtons.vue
@@ -57,9 +57,11 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcButton,
+} from '@nextcloud/vue'
 import CalendarQuestionIcon from 'vue-material-design-icons/CalendarQuestion.vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import logger from '../../utils/logger.js'
diff --git a/src/components/Editor/Invitees/InviteesList.vue b/src/components/Editor/Invitees/InviteesList.vue
index 24125de5f4..fa8367b284 100644
--- a/src/components/Editor/Invitees/InviteesList.vue
+++ b/src/components/Editor/Invitees/InviteesList.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import InviteesListSearch from './InviteesListSearch.vue'
 import InviteesListItem from './InviteesListItem.vue'
diff --git a/src/components/Editor/Invitees/InviteesListItem.vue b/src/components/Editor/Invitees/InviteesListItem.vue
index ed28ab5ea7..1fbf11d221 100644
--- a/src/components/Editor/Invitees/InviteesListItem.vue
+++ b/src/components/Editor/Invitees/InviteesListItem.vue
@@ -74,10 +74,12 @@
 
 <script>
 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 {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcActionRadio as ActionRadio,
+	NcActionCheckbox as ActionCheckbox,
+} from '@nextcloud/vue'
 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 0f78987514..8858229a5f 100644
--- a/src/components/Editor/Invitees/InviteesListSearch.vue
+++ b/src/components/Editor/Invitees/InviteesListSearch.vue
@@ -62,8 +62,10 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import {
+	NcAvatar as Avatar,
+	NcMultiselect as Multiselect,
+} from '@nextcloud/vue'
 import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
 import HttpClient from '@nextcloud/axios'
 import debounce from 'debounce'
diff --git a/src/components/Editor/Properties/PropertyColor.vue b/src/components/Editor/Properties/PropertyColor.vue
index 3738211b28..45569d4f65 100644
--- a/src/components/Editor/Properties/PropertyColor.vue
+++ b/src/components/Editor/Properties/PropertyColor.vue
@@ -59,10 +59,12 @@
 
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
+import {
+	NcActions as Actions,
+	NcButton,
+	NcActionButton as ActionButton,
+	NcColorPicker as ColorPicker,
+} from '@nextcloud/vue'
 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 07f670fd52..a6a55f2546 100644
--- a/src/components/Editor/Properties/PropertySelect.vue
+++ b/src/components/Editor/Properties/PropertySelect.vue
@@ -56,7 +56,7 @@
 
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 
 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 adeccf664d..21f4523cb0 100644
--- a/src/components/Editor/Properties/PropertySelectMultiple.vue
+++ b/src/components/Editor/Properties/PropertySelectMultiple.vue
@@ -75,7 +75,7 @@
 
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import PropertySelectMultipleColoredTag from './PropertySelectMultipleColoredTag.vue'
 import PropertySelectMultipleColoredOption from './PropertySelectMultipleColoredOption.vue'
 import { getLocale } from '@nextcloud/l10n'
diff --git a/src/components/Editor/Properties/PropertyText.vue b/src/components/Editor/Properties/PropertyText.vue
index 420f716f38..82e93ec6be 100644
--- a/src/components/Editor/Properties/PropertyText.vue
+++ b/src/components/Editor/Properties/PropertyText.vue
@@ -60,7 +60,7 @@
 <script>
 import autosize from '../../../directives/autosize.js'
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
-import linkify from '@nextcloud/vue/dist/Directives/Linkify.js'
+import { Linkify } from '@nextcloud/vue'
 
 import InformationVariant from 'vue-material-design-icons/InformationVariant.vue'
 import PropertyLinksMixin from '../../../mixins/PropertyLinksMixin.js'
@@ -69,7 +69,7 @@ export default {
 	name: 'PropertyText',
 	directives: {
 		autosize,
-		linkify,
+		Linkify,
 		InformationVariant,
 	},
 	mixins: [
diff --git a/src/components/Editor/Repeat/Repeat.vue b/src/components/Editor/Repeat/Repeat.vue
index 39253987ea..8d8458d80e 100644
--- a/src/components/Editor/Repeat/Repeat.vue
+++ b/src/components/Editor/Repeat/Repeat.vue
@@ -99,8 +99,7 @@ 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.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import { NcActions as Actions, NcActionButton as ActionButton } from '@nextcloud/vue'
 
 export default {
 	name: 'Repeat',
diff --git a/src/components/Editor/Repeat/RepeatEndRepeat.vue b/src/components/Editor/Repeat/RepeatEndRepeat.vue
index 05cb326fed..69614f9fa9 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.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatEndRepeat',
diff --git a/src/components/Editor/Repeat/RepeatFirstLastSelect.vue b/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
index f84a66b1b3..433ecf27bf 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.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatFirstLastSelect',
diff --git a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
index c6f43252f3..3ab88d3c7d 100644
--- a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
@@ -58,10 +58,12 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import {
+	NcButton,
+	NcActionRadio as ActionRadio,
+} from '@nextcloud/vue'
 import RepeatFirstLastSelect from './RepeatFirstLastSelect.vue'
 import RepeatOnTheSelect from './RepeatOnTheSelect.vue'
-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 fbcc8a20c6..3d3aa5b7b7 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.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatFreqSelect',
diff --git a/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue b/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
index 8cf41f9b8b..0e7848cac6 100644
--- a/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 import { getDayNamesMin } from '@nextcloud/l10n'
 
 export default {
diff --git a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
index cd59cf4abd..039587deee 100644
--- a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
@@ -50,8 +50,10 @@
 </template>
 
 <script>
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import {
+	NcActionCheckbox as ActionCheckbox,
+	NcButton,
+} from '@nextcloud/vue'
 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 ee08dc35b3..16b0010abe 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.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import { getDayNames } from '@nextcloud/l10n'
 
 export default {
diff --git a/src/components/Editor/Resources/ResourceListItem.vue b/src/components/Editor/Resources/ResourceListItem.vue
index c62e4178a7..e1086627c3 100644
--- a/src/components/Editor/Resources/ResourceListItem.vue
+++ b/src/components/Editor/Resources/ResourceListItem.vue
@@ -66,10 +66,12 @@
 </template>
 
 <script>
-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 {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcActionCaption as ActionCaption,
+	NcActionSeparator as ActionSeparator,
+} from '@nextcloud/vue'
 import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
 import { removeMailtoPrefix } from '../../../utils/attendee.js'
 import logger from '../../../utils/logger.js'
diff --git a/src/components/Editor/Resources/ResourceListSearch.vue b/src/components/Editor/Resources/ResourceListSearch.vue
index 0b79e2b7e7..28f69aac0f 100644
--- a/src/components/Editor/Resources/ResourceListSearch.vue
+++ b/src/components/Editor/Resources/ResourceListSearch.vue
@@ -81,14 +81,16 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import {
+	NcAvatar as Avatar,
+	NcActions as Actions,
+	NcActionCheckbox as ActionCheckbox,
+	NcMultiselect as Multiselect,
+} from '@nextcloud/vue'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import debounce from 'debounce'
 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'
 
diff --git a/src/components/Editor/Resources/ResourceRoomType.vue b/src/components/Editor/Resources/ResourceRoomType.vue
index 18018969a1..d5c72f5239 100644
--- a/src/components/Editor/Resources/ResourceRoomType.vue
+++ b/src/components/Editor/Resources/ResourceRoomType.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import { getAllRoomTypes } from '../../../models/resourceProps.js'
 
 export default {
diff --git a/src/components/Editor/SaveButtons.vue b/src/components/Editor/SaveButtons.vue
index ff30ac609f..4e81b308e8 100644
--- a/src/components/Editor/SaveButtons.vue
+++ b/src/components/Editor/SaveButtons.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'SaveButtons',
diff --git a/src/components/EmptyCalendar.vue b/src/components/EmptyCalendar.vue
index 39f69c2b29..346ecdc590 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.js'
+import { NcEmptyContent as EmptyContent } from '@nextcloud/vue'
 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 7951541a30..65d8918d7f 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.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import CalendarPickerOption from './CalendarPickerOption.vue'
 
 export default {
diff --git a/src/components/Shared/CalendarPickerOption.vue b/src/components/Shared/CalendarPickerOption.vue
index bf905f9475..010154b4e5 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.js'
+import { NcAvatar as Avatar } from '@nextcloud/vue'
 
 export default {
 	name: 'CalendarPickerOption',
diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue
index 873573dbda..1be1a43ac7 100644
--- a/src/components/Shared/DatePicker.vue
+++ b/src/components/Shared/DatePicker.vue
@@ -82,11 +82,14 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
+import {
+	NcButton,
+	NcDatetimePicker as DatetimePicker,
+	NcPopover as Popover,
+	NcTimezonePicker as TimezonePicker,
+} from '@nextcloud/vue'
 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,7 +99,6 @@ import {
 	showError,
 } from '@nextcloud/dialogs'
 
-import TimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker.js'
 import { getLangConfigForVue2DatePicker } from '../../utils/localization.js'
 
 export default {
diff --git a/src/components/Shared/TimePicker.vue b/src/components/Shared/TimePicker.vue
index 6629870679..ab25d072d1 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.js'
+import { NcDatetimePicker as DatetimePicker } from '@nextcloud/vue'
 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 ece42abe00..9fcdc31cb4 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.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import { translate as t } from '@nextcloud/l10n'
 
 import getTimezoneManager from '../../services/timezoneDataProviderService.js'
diff --git a/src/components/Subscription/HolidaySubscriptionPicker.vue b/src/components/Subscription/HolidaySubscriptionPicker.vue
index 7a775cf2c0..eca757a722 100644
--- a/src/components/Subscription/HolidaySubscriptionPicker.vue
+++ b/src/components/Subscription/HolidaySubscriptionPicker.vue
@@ -48,8 +48,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import { NcButton, NcModal } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import { mapGetters } from 'vuex'
 
diff --git a/src/fullcalendar/rendering/noEventsDidMount.js b/src/fullcalendar/rendering/noEventsDidMount.js
index 96b6b49347..e7f03b558a 100644
--- a/src/fullcalendar/rendering/noEventsDidMount.js
+++ b/src/fullcalendar/rendering/noEventsDidMount.js
@@ -20,7 +20,7 @@
  *
  */
 import Vue from 'vue'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import { NcEmptyContent as EmptyContent } from '@nextcloud/vue'
 import CalendarIcon from 'vue-material-design-icons/CalendarBlank.vue'
 import { translate as t } from '@nextcloud/l10n'
 
diff --git a/src/views/Appointments/Booking.vue b/src/views/Appointments/Booking.vue
index 32df3990c6..45ca50e53e 100644
--- a/src/views/Appointments/Booking.vue
+++ b/src/views/Appointments/Booking.vue
@@ -85,11 +85,13 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
+import {
+	NcAvatar as Avatar,
+	NcDatetimePicker as DatetimePicker,
+	NcTimezonePicker as TimezonePicker,
+	NcGuestContent,
+} from '@nextcloud/vue'
 import jstz from 'jstz'
-import TimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker.js'
-import NcGuestContent from '@nextcloud/vue/dist/Components/NcGuestContent.js'
 
 import AppointmentSlot from '../../components/Appointments/AppointmentSlot.vue'
 import { bookSlot, findSlots } from '../../services/appointmentService.js'
diff --git a/src/views/Appointments/Overview.vue b/src/views/Appointments/Overview.vue
index 0a1ddc149f..8c971224e6 100644
--- a/src/views/Appointments/Overview.vue
+++ b/src/views/Appointments/Overview.vue
@@ -62,8 +62,10 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import {
+	NcAvatar as Avatar,
+	NcEmptyContent as EmptyContent,
+} from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
 import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlank.vue'
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index 56c3066601..1c79b365f2 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -63,10 +63,12 @@
 
 <script>
 // Import vue components
-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 {
+	NcAppNavigation as AppNavigation,
+	NcAppNavigationSpacer as AppNavigationSpacer,
+	NcAppContent as AppContent,
+	NcContent,
+} from '@nextcloud/vue'
 import AppNavigationHeader from '../components/AppNavigation/AppNavigationHeader.vue'
 import CalendarList from '../components/AppNavigation/CalendarList.vue'
 import Settings from '../components/AppNavigation/Settings.vue'
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index b31c6da328..421f1bb7ad 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -65,13 +65,12 @@
 
 <script>
 import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import { NcEmptyContent as EmptyContent, NcButton } from '@nextcloud/vue'
 import EmptyCalendar from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconCheckbox from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 import { loadState } from '@nextcloud/initial-state'
 import moment from '@nextcloud/moment'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { imagePath, generateUrl } from '@nextcloud/router'
 import { initializeClientForUserView } from '../services/caldavService.js'
 import { dateFactory } from '../utils/date.js'
diff --git a/src/views/EditSimple.vue b/src/views/EditSimple.vue
index e6babb8aaa..77185cb707 100644
--- a/src/views/EditSimple.vue
+++ b/src/views/EditSimple.vue
@@ -163,11 +163,13 @@
 	</Popover>
 </template>
 <script>
-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 {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcActionLink as ActionLink,
+	NcEmptyContent as EmptyContent,
+	NcPopover as Popover,
+} from '@nextcloud/vue'
 import EditorMixin from '../mixins/EditorMixin.js'
 import IllustrationHeader from '../components/Editor/IllustrationHeader.vue'
 import PropertyTitle from '../components/Editor/Properties/PropertyTitle.vue'