diff --git a/src/EditorFactory.js b/src/EditorFactory.js
index dd597927710..63afc4458df 100644
--- a/src/EditorFactory.js
+++ b/src/EditorFactory.js
@@ -31,7 +31,7 @@ import { Editor } from '@tiptap/core'
 import { Emoji, Markdown, PlainText, RichText } from './extensions/index.js'
 import { translate as t } from '@nextcloud/l10n'
 import { listLanguages, registerLanguage } from 'lowlight/lib/core'
-import { emojiSearch } from '@nextcloud/vue/dist/Functions/emoji'
+import { emojiSearch } from '@nextcloud/vue'
 import { VueRenderer } from '@tiptap/vue-2'
 import EmojiList from './components/EmojiList.vue'
 import tippy from 'tippy.js'
diff --git a/src/components/Editor/AvatarWrapper.vue b/src/components/Editor/AvatarWrapper.vue
index 540422d0239..f14e213ff7f 100644
--- a/src/components/Editor/AvatarWrapper.vue
+++ b/src/components/Editor/AvatarWrapper.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import { Avatar } from '@nextcloud/vue'
 export default {
 	name: 'AvatarWrapper',
 	components: {
diff --git a/src/components/Editor/GuestNameDialog.vue b/src/components/Editor/GuestNameDialog.vue
index 4735d568ca3..f127978782e 100644
--- a/src/components/Editor/GuestNameDialog.vue
+++ b/src/components/Editor/GuestNameDialog.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import { Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AvatarWrapper from './AvatarWrapper.vue'
 import { useSyncServiceMixin } from '../Editor.provider.js'
diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
index d97a55aff29..9b700fd673a 100644
--- a/src/components/Editor/SessionList.vue
+++ b/src/components/Editor/SessionList.vue
@@ -62,8 +62,7 @@
 </template>
 
 <script>
-import Popover from '@nextcloud/vue/dist/Components/Popover'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import { Popover, Tooltip } from '@nextcloud/vue'
 import AvatarWrapper from './AvatarWrapper.vue'
 import store from '../../mixins/store.js'
 
diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
index b78b5b3a7a9..97dc1727b80 100644
--- a/src/components/Editor/Status.vue
+++ b/src/components/Editor/Status.vue
@@ -42,7 +42,7 @@
 <script>
 
 import { ERROR_TYPE } from './../../services/SyncService.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import { Tooltip } from '@nextcloud/vue'
 import {
 	useIsMobileMixin,
 	useIsPublicMixin,
diff --git a/src/components/EmojiList.vue b/src/components/EmojiList.vue
index 3b172eb8e57..2a3dada9791 100644
--- a/src/components/EmojiList.vue
+++ b/src/components/EmojiList.vue
@@ -42,7 +42,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { addRecent } from '@nextcloud/vue/dist/Functions/emoji'
+import { emojiAddRecent } from '@nextcloud/vue'
 
 export default {
 	name: 'EmojiList',
@@ -113,7 +113,7 @@ export default {
 
 			if (emojiObject) {
 				this.command(emojiObject)
-				addRecent(emojiObject)
+				emojiAddRecent(emojiObject)
 			}
 		},
 	},
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 96e2dd66f9c..18d7aeb3bfb 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -158,8 +158,7 @@
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import { Modal, Tooltip } from '@nextcloud/vue'
 import isMobile from './../mixins/isMobile.js'
 
 export default {
diff --git a/src/components/Menu/ActionImageUpload.vue b/src/components/Menu/ActionImageUpload.vue
index 4827b9ada37..081c09a7bf5 100644
--- a/src/components/Menu/ActionImageUpload.vue
+++ b/src/components/Menu/ActionImageUpload.vue
@@ -55,8 +55,7 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { Actions, ActionButton } from '@nextcloud/vue'
 
 import { Loading, Folder, Upload } from '../icons.js'
 import { useIsPublicMixin } from '../Editor.provider.js'
diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index 42ac2e7de21..5d946d7431d 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
+import { Actions } from '@nextcloud/vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
 import ActionSingle from './ActionSingle.vue'
 import { getIsActive } from './utils.js'
diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
index e6599c71780..c6135b10706 100644
--- a/src/components/Menu/ActionSingle.vue
+++ b/src/components/Menu/ActionSingle.vue
@@ -21,8 +21,7 @@
   -->
 
 <script>
-import Button from '@nextcloud/vue/dist/Components/Button'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { Button, ActionButton } from '@nextcloud/vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
 
 export default {
diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
index e675bd95b5a..160c6814fb1 100644
--- a/src/components/Menu/BaseActionEntry.js
+++ b/src/components/Menu/BaseActionEntry.js
@@ -22,7 +22,7 @@
 
 /* eslint-disable jsdoc/valid-types */
 
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import { Tooltip } from '@nextcloud/vue'
 import debounce from 'debounce'
 
 import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js'
diff --git a/src/components/Menu/EmojiPickerAction.vue b/src/components/Menu/EmojiPickerAction.vue
index 4b2dd29bbf1..e9215183d77 100644
--- a/src/components/Menu/EmojiPickerAction.vue
+++ b/src/components/Menu/EmojiPickerAction.vue
@@ -38,8 +38,7 @@
 
 <script>
 import { BaseActionEntry } from './BaseActionEntry.js'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
-import Button from '@nextcloud/vue/dist/Components/Button'
+import { EmojiPicker, Button } from '@nextcloud/vue'
 
 export default {
 	name: 'EmojiPickerAction',
diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue
index 8e8949e5587..8f8b536a0db 100644
--- a/src/components/MenuBubble.vue
+++ b/src/components/MenuBubble.vue
@@ -78,7 +78,7 @@ import { BubbleMenu } from '@tiptap/vue-2'
 import { getMarkAttributes } from '@tiptap/core'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import { Tooltip } from '@nextcloud/vue'
 import { optimalPath } from './../helpers/files.js'
 
 import { useEditorMixin } from './Editor.provider.js'
diff --git a/src/components/PublicFilesEditor.vue b/src/components/PublicFilesEditor.vue
index 88c3261e509..e3dd0921655 100644
--- a/src/components/PublicFilesEditor.vue
+++ b/src/components/PublicFilesEditor.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import { Modal } from '@nextcloud/vue'
 
 export default {
 	name: 'PublicFilesEditor',
diff --git a/src/files.js b/src/files.js
index fd8919927a0..b346bf54fc2 100644
--- a/src/files.js
+++ b/src/files.js
@@ -27,6 +27,8 @@ import { loadState } from '@nextcloud/initial-state'
 import { linkTo } from '@nextcloud/router'
 import store from './store.js'
 
+import '@nextcloud/vue/style.css'
+
 __webpack_nonce__ = window.btoa(OC.requestToken) // eslint-disable-line
 __webpack_public_path__ = linkTo('text', 'js/') // eslint-disable-line
 
diff --git a/src/main.js b/src/main.js
index 5217a9570ef..7be0d18b81f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,7 @@
 import store from './store.js'
 
+import '@nextcloud/vue/style.css'
+
 __webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
 __webpack_public_path__ = OC.linkTo('text', 'js/') // eslint-disable-line
 
diff --git a/src/nodes/Table/TableCellView.vue b/src/nodes/Table/TableCellView.vue
index 896a17b18c2..99462ae1563 100644
--- a/src/nodes/Table/TableCellView.vue
+++ b/src/nodes/Table/TableCellView.vue
@@ -57,8 +57,7 @@
 
 <script>
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { Actions, ActionButton } from '@nextcloud/vue'
 import { TableAddRowBefore, TableAddRowAfter, Delete } from '../../components/icons.js'
 
 export default {
diff --git a/src/nodes/Table/TableHeaderView.vue b/src/nodes/Table/TableHeaderView.vue
index c381f28d411..90564466a69 100644
--- a/src/nodes/Table/TableHeaderView.vue
+++ b/src/nodes/Table/TableHeaderView.vue
@@ -57,8 +57,7 @@
 
 <script>
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { Actions, ActionButton } from '@nextcloud/vue'
 import { Delete, TableAddColumnBefore, TableAddColumnAfter } from '../../components/icons.js'
 
 export default {
diff --git a/src/nodes/Table/TableView.vue b/src/nodes/Table/TableView.vue
index 71428f2b004..a251a7bdbfd 100644
--- a/src/nodes/Table/TableView.vue
+++ b/src/nodes/Table/TableView.vue
@@ -45,8 +45,7 @@
 
 <script>
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { Actions, ActionButton } from '@nextcloud/vue'
 import { TableSettings, Delete } from '../../components/icons.js'
 
 export default {
diff --git a/src/public.js b/src/public.js
index 598c185f189..c2ef9275c93 100644
--- a/src/public.js
+++ b/src/public.js
@@ -8,6 +8,8 @@ import { openMimetypes } from './helpers/mime.js'
 import { loadState } from '@nextcloud/initial-state'
 import store from './store.js'
 
+import '@nextcloud/vue/style.css'
+
 __webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
 __webpack_public_path__ = OC.linkTo('text', 'js/') // eslint-disable-line
 
diff --git a/src/viewer.js b/src/viewer.js
index aec8d65eda6..22168280ce1 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -19,6 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import '@nextcloud/vue/style.css'
 
 import ViewerComponent from './components/ViewerComponent.vue'
 import { openMimetypesMarkdown, openMimetypesPlainText } from './helpers/mime.js'