diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5327b904d6..0c3b57b98a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file.
 ### 💥 Breaking Changes
 * The package now uses Vue 3 instead of Vue 2.7
 * The package is now a native ESM package and the CommonJS entry points were dropped!
+* The old import path `@nextcloud/vue/dist/Components/NcComponent.js` were removed, please use the new ones (`@nextcloud/vue/components/NcComponent`) instead.
 * The `limitWidth` prop of `NcSettingsSection` was removed (the content is now always limitted width) [\#5605](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5605)
 * The `closing` and `opening` events of `NcAppSidebar` were removed as they are directly emitted when the sidebar was opened when using `v-if` and also just duplicated the state of the `open` prop [\#5606](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5606)
 * The `checked` prop was renamed to `modelValue`, the `update:checked` event was renamed to `update:modelValue`. This affects the following components.
@@ -107,6 +108,18 @@ All notable changes to this project will be documented in this file.
 * [next] chore: Update and pin development dependencies [\#5266](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5266) \([susnux](https://github.com/susnux)\)
 * [next] chore(NcUserStatusIcon): remove warn if status is not set by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5744
 
+## [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.14.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.14.0) (2024-07-04)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.13.0...v8.14.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 0f23fa1232..017f58070e 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'
 
 const app = createApp(App)
     .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 71627dcf8d..3a35161414 100644
--- a/docs/functions/a11y.md
+++ b/docs/functions/a11y.md
@@ -4,7 +4,7 @@
 -->
 
 ```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 a7937aafd2..b57b13d350 100644
--- a/docs/functions/emoji.md
+++ b/docs/functions/emoji.md
@@ -10,7 +10,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 7af6a4a3bc..e6598f082d 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 53bd34ac51..671eaf135b 100644
--- a/docs/functions/usernameToColor.md
+++ b/docs/functions/usernameToColor.md
@@ -4,7 +4,7 @@
 -->
 
 ```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 a2cf7a9db3..f302059bd0 100644
--- a/package.json
+++ b/package.json
@@ -36,25 +36,25 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
-    "./dist/Components/*.js": {
+    "./components/*": {
       "types": "./dist/components/*/index.d.ts",
-      "import": "./dist/Components/*.mjs"
+      "import": "./dist/components/*/index.mjs"
     },
-    "./dist/Directives/*.js": {
+    "./composables/*": {
+      "types": "./dist/composables/*/index.d.ts",
+      "import": "./dist/composables/*/index.mjs"
+    },
+    "./directives/*": {
       "types": "./dist/directives/*/index.d.ts",
-      "import": "./dist/Directives/*.mjs"
+      "import": "./dist/directives/*/index.mjs"
     },
-    "./dist/Functions/*.js": {
+    "./functions/*": {
       "types": "./dist/functions/*/index.d.ts",
-      "import": "./dist/Functions/*.mjs"
+      "import": "./dist/functions/*/index.mjs"
     },
-    "./dist/Mixins/*.js": {
+    "./mixins/*": {
       "types": "./dist/mixins/*/index.d.ts",
-      "import": "./dist/Mixins/*.mjs"
-    },
-    "./dist/Composables/*.js": {
-      "types": "./dist/composables/*/index.d.ts",
-      "import": "./dist/Composables/*.mjs"
+      "import": "./dist/mixins/*/index.mjs"
     }
   },
   "files": [
diff --git a/vite.config.ts b/vite.config.ts
index 5a66d6278d..146085e8bd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,45 +19,14 @@ const SCOPE_VERSION = JSON.stringify(versionHash)
 
 // Entry points which we build using vite
 const entryPoints = {
-	...globSync(['src/directives/*/index.js', 'src/directives/*/index.ts']).reduce((acc, item) => {
-		const name = item
-			.replace(/\/index\.(j|t)s/, '')
-			.replace('src/directives/', 'Directives/')
-		acc[name] = join(import.meta.dirname, item)
-		return acc
-	}, {}),
-
-	...globSync(['src/components/*/index.js', 'src/components/*/index.ts']).reduce((acc, item) => {
-		const name = item
-			.replace(/\/index\.(j|t)s/, '')
-			.replace('src/components/', 'Components/')
-		acc[name] = join(import.meta.dirname, item)
-		return acc
-	}, {}),
-
-	...globSync(['src/functions/*/index.js', 'src/functions/*/index.ts']).reduce((acc, item) => {
-		const name = item
-			.replace(/\/index\.(j|t)s/, '')
-			.replace('src/functions/', 'Functions/')
-		acc[name] = join(import.meta.dirname, item)
-		return acc
-	}, {}),
-
-	...globSync(['src/mixins/*/index.js', 'src/mixins/*/index.ts']).reduce((acc, item) => {
-		const name = item
-			.replace(/\/index\.(j|t)s/, '')
-			.replace('src/mixins/', 'Mixins/')
-		acc[name] = join(import.meta.dirname, item)
-		return acc
-	}, {}),
-
-	...globSync(['src/composables/*/index.js', 'src/composables/*/index.ts']).reduce((acc, item) => {
-		const name = item
-			.replace(/\/index\.(j|t)s/, '')
-			.replace('src/composables/', 'Composables/')
-		acc[name] = join(import.meta.dirname, item)
-		return acc
-	}, {}),
+	...globSync('src/@(components|composables|directives|functions|mixins)/*/index.@(js|ts)')
+		.reduce((acc, item) => {
+			const name = item
+				.replace('src/', '')
+				.replace(/\/index\.(j|t)s$/, '/index')
+			acc[name] = join(import.meta.dirname, item)
+			return acc
+		}, {}),
 
 	index: resolve(import.meta.dirname, 'src/index.ts'),
 }