diff --git a/CHANGELOG.md b/CHANGELOG.md
index 630f0842a0..e27ab7f3f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,18 @@
 
 # Changelog
 
+## [v8.23.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.23.0) (UNRELEASED)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.22.0...v8.23.0)
+
+### 🚀 Enhancements
+* The individual import path of components, composables, directives, and functions was changed.
+  The type of import is (e.g. `components`) is now lowercase and the `dist` will be omitted.
+  For example to import the `NcButton` component the path has changed:
+  - from `import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'`.
+  - to `import NcButton from '@nextcloud/vue/components/NcButton'`
+
+  The old import paths are still valid, but deprecated and will be removed in version 9.
+
 ## [v8.22.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.22.0) (2024-12-20)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.21.0...v8.22.0)
 
diff --git a/docs/composables.md b/docs/composables.md
index 07980cfcdc..5666b3b5a1 100644
--- a/docs/composables.md
+++ b/docs/composables.md
@@ -8,7 +8,7 @@
 To use any composable, import and use it according to documentation or Vue guidelines, for example:
 
 ```js static
-import { useIsMobile } from '@nextcloud/vue/dist/composables/useIsMobile.js'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 
 export default {
 	setup() {
@@ -21,7 +21,7 @@ export default {
 or in `<script setup>`:
 
 ```js static
-import { useIsMobile } from '@nextcloud/vue/dist/composables/useIsMobile.js'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 
 const isMobile = useIsMobile()
 ```
diff --git a/docs/composables/useHotKey.md b/docs/composables/useHotKey.md
index 619ef93e78..2868a656bb 100644
--- a/docs/composables/useHotKey.md
+++ b/docs/composables/useHotKey.md
@@ -8,7 +8,7 @@ It respects Nextcloud's value of ```OCP.Accessibility.disableKeyboardShortcuts``
 
 ### Usage
 ```js static
-import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey/index.js'
+import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
 
 const stopCallback = useHotKey(key, callback, options)
 ```
diff --git a/docs/composables/useIsDarkTheme.md b/docs/composables/useIsDarkTheme.md
index 391f441621..56bbaea252 100644
--- a/docs/composables/useIsDarkTheme.md
+++ b/docs/composables/useIsDarkTheme.md
@@ -7,7 +7,7 @@
 import {
     useIsDarkTheme,
     useIsDarkThemeElement,
-} from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
+} from '@nextcloud/vue/composables/useIsDarkTheme'
 ```
 
 Same as `isDarkTheme` functions, but with reactivity.
diff --git a/docs/directives.md b/docs/directives.md
index ad60eccc79..9c6fa539dd 100644
--- a/docs/directives.md
+++ b/docs/directives.md
@@ -8,7 +8,7 @@
 To use any directive, import and register it locally, for example:
 
 ```js static
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Tooltip from '@nextcloud/vue/directives/Tooltip'
 
 export default {
     directives: {
@@ -19,13 +19,13 @@ export default {
 or in `<script setup>`:
 
 ```js static
-import vTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import vTooltip from '@nextcloud/vue/directives/Tooltip'
 ```
 
 You can also register any directive globally. But it is not recommended.
 
 ```js static
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Tooltip from '@nextcloud/vue/directives/Tooltip'
 
 Vue.directive('Tooltip', Tooltip)
 ```
diff --git a/docs/directives/focus.md b/docs/directives/focus.md
index e17c4365ca..77445df3bf 100644
--- a/docs/directives/focus.md
+++ b/docs/directives/focus.md
@@ -4,7 +4,7 @@
 -->
 
 ```js static
-import Focus from '@nextcloud/vue/dist/Directives/Focus.js'
+import Focus from '@nextcloud/vue/directives/Focus'
 ```
 
 Focus an element when it is mounted to DOM.
diff --git a/docs/directives/linkify.md b/docs/directives/linkify.md
index 6f727762c9..414886f195 100644
--- a/docs/directives/linkify.md
+++ b/docs/directives/linkify.md
@@ -4,7 +4,7 @@
 -->
 
 ```js static
-import Linkify from '@nextcloud/vue/dist/Directives/Linkify.js'
+import Linkify from '@nextcloud/vue/directives/Linkify'
 ```
 
 Automatically make links in rendered text clickable.
diff --git a/docs/directives/tooltip.md b/docs/directives/tooltip.md
index 7373bdb9df..7c368235b4 100644
--- a/docs/directives/tooltip.md
+++ b/docs/directives/tooltip.md
@@ -4,7 +4,7 @@
 -->
 
 ```js static
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Tooltip from '@nextcloud/vue/directives/Tooltip'
 ```
 
 Tooltip directive based on [v-tooltip](https://github.com/Akryum/v-tooltip).
diff --git a/docs/functions/a11y.md b/docs/functions/a11y.md
index 00f0722596..aa36a16a4c 100644
--- a/docs/functions/a11y.md
+++ b/docs/functions/a11y.md
@@ -3,7 +3,7 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 ```js static
-import { isA11yActivation } from '@nextcloud/vue/dist/Functions/a11y.js'
+import { isA11yActivation } from '@nextcloud/vue/functions/a11y'
 ```
 
 ## Definitions
diff --git a/docs/functions/emoji.md b/docs/functions/emoji.md
index 46432dcfd7..1e1d004b2a 100644
--- a/docs/functions/emoji.md
+++ b/docs/functions/emoji.md
@@ -9,7 +9,7 @@ import {
     emojiAddRecent,
     getCurrentSkinTone,
     setCurrentSkinTone,
-} from '@nextcloud/vue/dist/Functions/emoji.js'
+} from '@nextcloud/vue/functions/emoji'
 ```
 
 ## Definitions
diff --git a/docs/functions/isDarkTheme.md b/docs/functions/isDarkTheme.md
index 809e8ef566..213cbc0c23 100644
--- a/docs/functions/isDarkTheme.md
+++ b/docs/functions/isDarkTheme.md
@@ -7,7 +7,7 @@
 import {
     isDarkTheme,
     checkIfDarkTheme,
-} from '@nextcloud/vue/dist/Functions/isDarkTheme.js'
+} from '@nextcloud/vue/functions/isDarkTheme'
 ```
 
 Check whether the dark theme is enabled in Nextcloud. 
diff --git a/docs/functions/spawnDialog.md b/docs/functions/spawnDialog.md
index 4af36206f4..93e917046e 100644
--- a/docs/functions/spawnDialog.md
+++ b/docs/functions/spawnDialog.md
@@ -5,7 +5,7 @@
 ```ts static
 import {
 	spawnDialog,
-} from '@nextcloud/vue/dist/Functions/dialog.js'
+} from '@nextcloud/vue/functions/dialog'
 ```
 
 ## Definitions
diff --git a/docs/functions/usernameToColor.md b/docs/functions/usernameToColor.md
index 02f7035f8e..642dcc5180 100644
--- a/docs/functions/usernameToColor.md
+++ b/docs/functions/usernameToColor.md
@@ -3,7 +3,7 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 ```js static
-import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
+import usernameToColor from '@nextcloud/vue/functions/usernameToColor'
 ```
 
 ## Definition
diff --git a/docs/index.md b/docs/index.md
index ab472bd10e..e276de3c4f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -33,7 +33,7 @@ You can also import individual module without bundling the full library.
 
 
 ```js static
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 ```
 
 ## Recommendations
diff --git a/package.json b/package.json
index 17e6acec68..1762354d40 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,22 @@
     "./dist/Composables/*.js": {
       "import": "./dist/Composables/*.mjs",
       "require": "./dist/Composables/*.cjs"
+    },
+    "./components/*": {
+      "import": "./dist/Components/*.mjs",
+      "require": "./dist/Components/*.cjs"
+    },
+    "./composables/*": {
+      "import": "./dist/Composables/*.mjs",
+      "require": "./dist/Composables/*.cjs"
+    },
+    "./directives/*": {
+      "import": "./dist/Directives/*.mjs",
+      "require": "./dist/Directives/*.cjs"
+    },
+    "./functions/*": {
+      "import": "./dist/Functions/*.mjs",
+      "require": "./dist/Functions/*.cjs"
     }
   },
   "files": [