Merge pull request #7263 from nextcloud/enhancement/deduplicate-nextcloud-vue-imports

Deduplicate imported @nextcloud/vue code

42 files changed, 42 insertions, 109 deletions

diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index 142d9b49f..4d374dbfb 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -254,8 +254,7 @@
 
 <script>
 import { Tab, Tabs } from 'vue-tabs-component'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import { NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import IconCheck from 'vue-material-design-icons/Check'
 import { translate as t } from '@nextcloud/l10n'
 
diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
index b625f2cc6..85f12bc12 100644
--- a/src/components/AccountSettings.vue
+++ b/src/components/AccountSettings.vue
@@ -117,8 +117,7 @@ import EditorSettings from '../components/EditorSettings'
 import AccountDefaultsSettings from '../components/AccountDefaultsSettings'
 import SignatureSettings from '../components/SignatureSettings'
 import AliasSettings from '../components/AliasSettings'
-import AppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog'
-import AppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection'
+import { NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection } from '@nextcloud/vue'
 import TrustedSenders from './TrustedSenders'
 import SieveAccountForm from './SieveAccountForm'
 import SieveFilterForm from './SieveFilterForm'
diff --git a/src/components/AliasForm.vue b/src/components/AliasForm.vue
index 4497219a4..899946754 100644
--- a/src/components/AliasForm.vue
+++ b/src/components/AliasForm.vue
@@ -70,8 +70,7 @@
 
 <script>
 import logger from '../logger'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import { NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import IconDelete from 'vue-material-design-icons/Delete'
 import IconRename from 'vue-material-design-icons/Pencil'
 import IconCheck from 'vue-material-design-icons/Check'
diff --git a/src/components/AliasSettings.vue b/src/components/AliasSettings.vue
index 8f4ea48ce..8abf2eeef 100644
--- a/src/components/AliasSettings.vue
+++ b/src/components/AliasSettings.vue
@@ -64,8 +64,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import { NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import IconCheck from 'vue-material-design-icons/Check'
 import logger from '../logger'
 import AliasForm from './AliasForm'
diff --git a/src/components/AppSettingsMenu.vue b/src/components/AppSettingsMenu.vue
index bc8f8262f..3c50d02c5 100644
--- a/src/components/AppSettingsMenu.vue
+++ b/src/components/AppSettingsMenu.vue
@@ -98,11 +98,10 @@
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
+import { NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 
 import IconInfo from 'vue-material-design-icons/Information'
 import IconAdd from 'vue-material-design-icons/Plus'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import IconEmail from 'vue-material-design-icons/Email'
 import Logger from '../logger'
 import KeyboardShortcuts from '../views/KeyboardShortcuts'
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 6d8c847d3..e2487c5ad 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -416,23 +416,15 @@ import trimStart from 'lodash/fp/trimCharsStart'
 import Autosize from 'vue-autosize'
 import debouncePromise from 'debounce-promise'
 
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
+import { NcActions as Actions, NcActionButton as ActionButton, NcActionCheckbox as ActionCheckbox, NcActionInput as ActionInput, NcActionRadio as ActionRadio, NcButton as ButtonVue, NcEmptyContent as EmptyContent, NcMultiselect as Multiselect, NcListItemIcon as ListItemIcon } from '@nextcloud/vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft'
 import Delete from 'vue-material-design-icons/Delete'
 import ComposerAttachments from './ComposerAttachments'
 import Download from 'vue-material-design-icons/Download'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 import IconUpload from 'vue-material-design-icons/Upload'
 import IconFolder from 'vue-material-design-icons/Folder'
 import IconPublic from 'vue-material-design-icons/Link'
 import IconCheck from 'vue-material-design-icons/Check'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon'
 import RecipientListItem from './RecipientListItem'
 import UnfoldMoreHorizontal from 'vue-material-design-icons/UnfoldMoreHorizontal'
 import UnfoldLessHorizontal from 'vue-material-design-icons/UnfoldLessHorizontal'
diff --git a/src/components/EmptyMailbox.vue b/src/components/EmptyMailbox.vue
index 92390b6f5..16bc9fcba 100644
--- a/src/components/EmptyMailbox.vue
+++ b/src/components/EmptyMailbox.vue
@@ -7,6 +7,7 @@
 
 <script>
 import IconMail from 'vue-material-design-icons/Email'
+
 export default {
 	name: 'EmptyMailbox',
 	components: {
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index 6b24c8531..33ae8a8ca 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -244,8 +244,7 @@
 	</ListItem>
 </template>
 <script>
-import ListItem from '@nextcloud/vue/dist/Components/NcListItem'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import { NcListItem as ListItem, NcActionButton as ActionButton, NcActionLink as ActionLink } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon'
 import Avatar from './Avatar'
 import IconCreateEvent from 'vue-material-design-icons/Calendar'
@@ -280,7 +279,6 @@ import EventModal from './EventModal'
 import EnvelopePrimaryActions from './EnvelopePrimaryActions'
 import { hiddenTags } from './tags.js'
 import { generateUrl } from '@nextcloud/router'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
 import DownloadIcon from 'vue-material-design-icons/Download'
 
 export default {
diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue
index 9b6517cbb..6da8e93a7 100644
--- a/src/components/EnvelopeList.vue
+++ b/src/components/EnvelopeList.vue
@@ -204,12 +204,10 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import { NcActions as Actions, NcActionButton as ActionButton, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import Envelope from './Envelope'
 import IconDelete from 'vue-material-design-icons/Delete'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import ImportantIcon from './icons/ImportantIcon'
 import IconSelect from 'vue-material-design-icons/CloseThick'
 import IconFavorite from 'vue-material-design-icons/Star'
diff --git a/src/components/EventModal.vue b/src/components/EventModal.vue
index ebdded369..78264d006 100644
--- a/src/components/EventModal.vue
+++ b/src/components/EventModal.vue
@@ -60,11 +60,9 @@
 
 <script>
 import { createEvent, getTimezoneManager, DateTimeValue, TextProperty } from '@nextcloud/calendar-js'
-import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker'
+import { NcDatetimePicker as DatetimePicker, NcModal as Modal, NcMultiselect as Multiselect } from '@nextcloud/vue'
 import jstz from 'jstz'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
 
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { getUserCalendars, importCalendarEvent } from '../service/DAVService'
 import logger from '../logger'
 import CalendarPickerOption from './CalendarPickerOption'
diff --git a/src/components/Imip.vue b/src/components/Imip.vue
index 5f4a7b8a4..29bba79e5 100644
--- a/src/components/Imip.vue
+++ b/src/components/Imip.vue
@@ -127,7 +127,7 @@
 
 <script>
 import EventData from './imip/EventData'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
+import { NcButton as Button, NcMultiselect as Multiselect } from '@nextcloud/vue'
 import CloseIcon from 'vue-material-design-icons/Close'
 import CalendarIcon from 'vue-material-design-icons/Calendar'
 import { getParserManager, Parameter, Property } from '@nextcloud/calendar-js'
@@ -136,7 +136,6 @@ import { removeMailtoPrefix } from '../util/eventAttendee'
 import logger from '../logger'
 import { namespaces as NS } from '@nextcloud/cdav-library'
 import CalendarPickerOption from './CalendarPickerOption'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { uidToHexColor } from '../util/calendarColor'
 import { randomId } from '../util/randomId'
 import pLimit from 'p-limit'
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index c427d4bb3..5555d62e8 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import { NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 export default {
 	name: 'Loading',
 	components: {
diff --git a/src/components/MailboxPicker.vue b/src/components/MailboxPicker.vue
index 4ba972a7c..cd29c3da2 100644
--- a/src/components/MailboxPicker.vue
+++ b/src/components/MailboxPicker.vue
@@ -60,9 +60,7 @@
 	</Modal>
 </template>
 <script>
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
+import { NcModal as Modal, NcLoadingIcon as IconLoading, NcButton as ButtonVue } from '@nextcloud/vue'
 import IconBreadcrumb from 'vue-material-design-icons/ChevronRight'
 import IconInbox from 'vue-material-design-icons/Home'
 import IconDraft from 'vue-material-design-icons/Pencil'
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index 7af2c7543..e78147104 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -65,10 +65,7 @@
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
-import Popover from '@nextcloud/vue/dist/Components/NcPopover'
+import { NcAppContent as AppContent, NcAppContentList as AppContentList, NcButton as ButtonVue, NcPopover as Popover } from '@nextcloud/vue'
 
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 import SectionTitle from './SectionTitle'
diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue
index 758d8bdc9..fb1959b69 100644
--- a/src/components/MenuEnvelope.vue
+++ b/src/components/MenuEnvelope.vue
@@ -195,9 +195,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
-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 { NcActions as Actions, NcActionButton as ActionButton, NcActionLink as ActionLink, NcModal as Modal } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon'
 import { Base64 } from 'js-base64'
 import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder'
@@ -210,7 +208,6 @@ import EventModal from './EventModal'
 import { generateUrl } from '@nextcloud/router'
 import InformationIcon from 'vue-material-design-icons/Information'
 import ImportantIcon from './icons/ImportantIcon'
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
 import MoveModal from './MoveModal'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew'
 import PlusIcon from 'vue-material-design-icons/Plus'
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index b02db939e..c627329d1 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -84,11 +84,8 @@ import { translate as t } from '@nextcloud/l10n'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { mixin as onClickOutside } from 'vue-on-click-outside'
 
-import PopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import { NcPopoverMenu as PopoverMenu, NcActions as Actions, NcActionButton as ActionButton, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import IconAdd from 'vue-material-design-icons/Plus'
 import IconSave from 'vue-material-design-icons/Folder'
 import IconDownload from 'vue-material-design-icons/Download'
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index bb3e5c1ff..fa7ddf9a4 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -70,7 +70,7 @@
 
 <script>
 import { basename } from '@nextcloud/paths'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import { NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { saveAttachmentsToFiles } from '../service/AttachmentService'
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index e4f6b5827..785d22ce3 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -43,12 +43,10 @@
 import { iframeResizer } from 'iframe-resizer'
 import PrintScout from 'printscout'
 import { trustSender } from '../service/TrustedSenderService'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
+import { NcActionButton as ActionButton, NcActions as Actions, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import IconImage from 'vue-material-design-icons/ImageSizeSelectActual'
 import IconMail from 'vue-material-design-icons/Email'
 import IconDomain from 'vue-material-design-icons/Domain'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 import logger from '../logger'
 import MdnRequest from './MdnRequest'
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 7a8888381..3b2ca2985 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -76,11 +76,7 @@
 </template>
 
 <script>
-import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
-import AppNavigationSettings
-	from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
-import AppNavigationSpacer
-	from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer'
+import { NcAppNavigation as AppNavigation, NcAppNavigationSettings as AppNavigationSettings, NcAppNavigationSpacer as AppNavigationSpacer } from '@nextcloud/vue'
 
 import NavigationAccount from './NavigationAccount'
 import NavigationAccountExpandCollapse from './NavigationAccountExpandCollapse'
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index a9263aee7..c376fcdeb 100644
--- a/src/components/NavigationAccount.vue
+++ b/src/components/NavigationAccount.vue
@@ -109,12 +109,7 @@
 
 <script>
 
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import { NcAppNavigationItem as AppNavigationItem, NcActionButton as ActionButton, NcActionCheckbox as ActionCheckbox, NcActionInput as ActionInput, NcActionText as ActionText, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 
diff --git a/src/components/NavigationAccountExpandCollapse.vue b/src/components/NavigationAccountExpandCollapse.vue
index 4264aef16..d15fd2858 100644
--- a/src/components/NavigationAccountExpandCollapse.vue
+++ b/src/components/NavigationAccountExpandCollapse.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import { NcAppNavigationItem as AppNavigationItem } from '@nextcloud/vue'
 import logger from '../logger'
 
 export default {
diff --git a/src/components/NavigationMailbox.vue b/src/components/NavigationMailbox.vue
index 0fbf8c8ce..f1000df50 100644
--- a/src/components/NavigationMailbox.vue
+++ b/src/components/NavigationMailbox.vue
@@ -211,12 +211,7 @@
 
 <script>
 
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import CounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
+import { NcAppNavigationItem as AppNavigationItem, NcCounterBubble as CounterBubble, NcActionButton as ActionButton, NcActionCheckbox as ActionCheckbox, NcActionInput as ActionInput, NcActionText as ActionText, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import IconEmailCheck from 'vue-material-design-icons/EmailCheck'
 import IconExternal from 'vue-material-design-icons/OpenInNew'
 import IconFolder from 'vue-material-design-icons/Folder'
@@ -233,7 +228,6 @@ import IconAllInboxes from 'vue-material-design-icons/InboxMultiple'
 import EraserVariant from 'vue-material-design-icons/EraserVariant'
 import ImportantIcon from './icons/ImportantIcon'
 import IconSend from 'vue-material-design-icons/Send'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import MoveMailboxModal from './MoveMailboxModal'
 import { UNIFIED_INBOX_ID } from '../store/constants'
 
diff --git a/src/components/NavigationOutbox.vue b/src/components/NavigationOutbox.vue
index 9a1b3674e..b552728f1 100644
--- a/src/components/NavigationOutbox.vue
+++ b/src/components/NavigationOutbox.vue
@@ -40,8 +40,7 @@
 </template>
 
 <script>
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import CounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
+import { NcAppNavigationItem as AppNavigationItem, NcCounterBubble as CounterBubble } from '@nextcloud/vue'
 import IconOutbox from 'vue-material-design-icons/InboxArrowUp'
 
 export default {
diff --git a/src/components/NewMessageButtonHeader.vue b/src/components/NewMessageButtonHeader.vue
index a97f9c052..3cf2720da 100644
--- a/src/components/NewMessageButtonHeader.vue
+++ b/src/components/NewMessageButtonHeader.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import Button from '@nextcloud/vue/dist/Components/NcButton'
+import { NcButton as Button } from '@nextcloud/vue'
 import IconAdd from 'vue-material-design-icons/Plus'
 import IconRefresh from 'vue-material-design-icons/Refresh'
 import logger from '../logger'
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 857c91a7d..4e2378979 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -24,7 +24,7 @@
 	</Modal>
 </template>
 <script>
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import { NcModal as Modal } from '@nextcloud/vue'
 import logger from '../logger'
 import { toPlain, toHtml, plain } from '../util/text'
 import { saveDraft } from '../service/MessageService'
diff --git a/src/components/NoMessageSelected.vue b/src/components/NoMessageSelected.vue
index 9e97ff0b2..e6d39b551 100644
--- a/src/components/NoMessageSelected.vue
+++ b/src/components/NoMessageSelected.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails'
+import { NcAppContentDetails as AppContentDetails } from '@nextcloud/vue'
 import IconMail from 'vue-material-design-icons/Email'
 
 export default {
diff --git a/src/components/OutOfOfficeForm.vue b/src/components/OutOfOfficeForm.vue
index 7396f35fb..a277860f6 100644
--- a/src/components/OutOfOfficeForm.vue
+++ b/src/components/OutOfOfficeForm.vue
@@ -108,9 +108,8 @@
 </template>
 
 <script>
-import DatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker'
+import { NcDatetimePicker as DatetimePicker, NcButton as Button } from '@nextcloud/vue'
 import TextEditor from './TextEditor'
-import Button from '@nextcloud/vue/dist/Components/NcButton'
 import CheckIcon from 'vue-material-design-icons/Check'
 import { buildOutOfOfficeSieveScript, parseOutOfOfficeState } from '../util/outOfOffice'
 import logger from '../logger'
diff --git a/src/components/Outbox.vue b/src/components/Outbox.vue
index 535e0d1b7..95240b712 100644
--- a/src/components/Outbox.vue
+++ b/src/components/Outbox.vue
@@ -51,8 +51,7 @@
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
+import { NcAppContent as AppContent, NcAppContentList as AppContentList } from '@nextcloud/vue'
 import Loading from './Loading'
 import Error from './Error'
 import EmptyMailbox from './EmptyMailbox'
diff --git a/src/components/OutboxMessageListItem.vue b/src/components/OutboxMessageListItem.vue
index 9f0d306b7..9ef81577b 100644
--- a/src/components/OutboxMessageListItem.vue
+++ b/src/components/OutboxMessageListItem.vue
@@ -57,8 +57,7 @@
 </template>
 
 <script>
-import ListItem from '@nextcloud/vue/dist/Components/NcListItem'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import { NcListItem as ListItem, NcActionButton as ActionButton } from '@nextcloud/vue'
 import Avatar from './Avatar'
 import IconDelete from 'vue-material-design-icons/Delete'
 import { getLanguage, translate as t } from '@nextcloud/l10n'
diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index 50ba36608..f074df8b4 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -108,10 +108,7 @@
 <script>
 import { generateUrl } from '@nextcloud/router'
 
-import UserBubble from '@nextcloud/vue/dist/Components/NcUserBubble'
-import Popover from '@nextcloud/vue/dist/Components/NcPopover'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
+import { NcUserBubble as UserBubble, NcPopover as Popover, NcMultiselect as Multiselect, NcButton as ButtonVue } from '@nextcloud/vue'
 
 import IconReply from 'vue-material-design-icons/Reply'
 import IconAdd from 'vue-material-design-icons/Plus'
diff --git a/src/components/RecipientListItem.vue b/src/components/RecipientListItem.vue
index 50e03e1b6..78519740d 100644
--- a/src/components/RecipientListItem.vue
+++ b/src/components/RecipientListItem.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon'
+import { NcListItemIcon as ListItemIcon } from '@nextcloud/vue'
 import Close from 'vue-material-design-icons/Close'
 export default {
 	name: 'RecipientListItem',
diff --git a/src/components/SieveAccountForm.vue b/src/components/SieveAccountForm.vue
index 5b3a02ff9..28f37e51d 100644
--- a/src/components/SieveAccountForm.vue
+++ b/src/components/SieveAccountForm.vue
@@ -134,7 +134,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 export default {
 	name: 'SieveAccountForm',
 	components: {
diff --git a/src/components/SieveFilterForm.vue b/src/components/SieveFilterForm.vue
index cd93ea65f..9ce30d19c 100644
--- a/src/components/SieveFilterForm.vue
+++ b/src/components/SieveFilterForm.vue
@@ -24,8 +24,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import { NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import IconCheck from 'vue-material-design-icons/Check'
 export default {
 	name: 'SieveFilterForm',
diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue
index eff4c2aad..c945db864 100644
--- a/src/components/SignatureSettings.vue
+++ b/src/components/SignatureSettings.vue
@@ -70,9 +70,7 @@ import TextEditor from './TextEditor'
 import { detect, toHtml } from '../util/text'
 import Vue from 'vue'
 
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import { NcMultiselect as Multiselect, NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import IconCheck from 'vue-material-design-icons/Check'
 
 export default {
diff --git a/src/components/TagModal.vue b/src/components/TagModal.vue
index 106cb5429..64d167490 100644
--- a/src/components/TagModal.vue
+++ b/src/components/TagModal.vue
@@ -93,14 +93,9 @@
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import { NcModal as Modal, NcActions as Actions, NcActionText as ActionText, NcActionInput as ActionInput, NcActionButton as ActionButton, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 import IconRename from 'vue-material-design-icons/Pencil'
 import IconTag from 'vue-material-design-icons/Tag'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import { showError, showInfo } from '@nextcloud/dialogs'
 import { hiddenTags } from './tags.js'
 
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 272c6c486..2440f0012 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -47,8 +47,7 @@
 </template>
 
 <script>
-import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails'
-import Popover from '@nextcloud/vue/dist/Components/NcPopover'
+import { NcAppContentDetails as AppContentDetails, NcPopover as Popover } from '@nextcloud/vue'
 
 import { prop, uniqBy } from 'ramda'
 import debounce from 'lodash/fp/debounce'
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 0e215bd67..e1a07837c 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -147,7 +147,7 @@
 </template>
 <script>
 import Avatar from './Avatar'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import Error from './Error'
 import importantSvg from '../../img/important.svg'
 import IconFavorite from 'vue-material-design-icons/Star'
diff --git a/src/components/TrustedSenders.vue b/src/components/TrustedSenders.vue
index 77b7643d6..3e6a5b233 100644
--- a/src/components/TrustedSenders.vue
+++ b/src/components/TrustedSenders.vue
@@ -38,7 +38,7 @@
 <script>
 
 import { fetchTrustedSenders, trustSender } from '../service/TrustedSenderService'
-import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
+import { NcButton as ButtonVue } from '@nextcloud/vue'
 import prop from 'lodash/fp/prop'
 import sortBy from 'lodash/fp/sortBy'
 import logger from '../logger'
diff --git a/src/components/itinerary/CalendarImport.vue b/src/components/itinerary/CalendarImport.vue
index b650abf59..1b30728e2 100644
--- a/src/components/itinerary/CalendarImport.vue
+++ b/src/components/itinerary/CalendarImport.vue
@@ -39,10 +39,8 @@
 
 <script>
 
-import Actions from '@nextcloud/vue/dist/Components/NcActions'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import { NcActions as Actions, NcActionButton as ActionButton, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
 
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import IconAdd from 'vue-material-design-icons/Plus'
 import ical from 'ical.js'
 import moment from '@nextcloud/moment'
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 459718efc..f7bf1fd11 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Content from '@nextcloud/vue/dist/Components/NcContent'
+import { NcContent as Content } from '@nextcloud/vue'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 
 import '../../css/mail.scss'
diff --git a/src/views/KeyboardShortcuts.vue b/src/views/KeyboardShortcuts.vue
index 7a11e4924..5642238bd 100644
--- a/src/views/KeyboardShortcuts.vue
+++ b/src/views/KeyboardShortcuts.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/NcModal'
+import { NcModal as Modal } from '@nextcloud/vue'
 
 export default {
 	name: 'KeyboardShortcuts',
diff --git a/src/views/Setup.vue b/src/views/Setup.vue
index 829bdf4c5..d99e36e70 100644
--- a/src/views/Setup.vue
+++ b/src/views/Setup.vue
@@ -20,12 +20,10 @@
 </template>
 
 <script>
-import Content from '@nextcloud/vue/dist/Components/NcContent'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import { NcContent as Content, NcAppContent as AppContent, NcEmptyContent as EmptyContent } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
 
 import AccountForm from '../components/AccountForm'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 import IconMail from 'vue-material-design-icons/Email'
 import Navigation from '../components/Navigation'
 import logger from '../logger'