diff --git a/docs/.vitepress/navigation.js b/docs/.vitepress/navigation.js
index 1e43b9c48e..65792ffc37 100644
--- a/docs/.vitepress/navigation.js
+++ b/docs/.vitepress/navigation.js
@@ -72,6 +72,10 @@ export default {
           text: 'Composables',
           collapsed: true,
           items: [
+            {
+              text: 'useBoosterHydrate',
+              link: '/composables/useBoosterHydrate'
+            },
             { text: 'useBoosterFont', link: '/composables/useBoosterFont' },
             {
               text: 'useBoosterCritical',
diff --git a/docs/src/composables/useBoosterHydrate.md b/docs/src/composables/useBoosterHydrate.md
new file mode 100644
index 0000000000..0d441e7a23
--- /dev/null
+++ b/docs/src/composables/useBoosterHydrate.md
@@ -0,0 +1,21 @@
+---
+title: useBoosterHydrate
+---
+
+# {{$frontmatter.title}}
+
+Compasable provides a function for wrapping components in order to control hydration.
+
+[Learn more about component import](/guide/usage#import-components).
+
+## Return
+
+Returns import wrapper function.
+
+## Example
+
+```js
+const hydrate = useBoosterHydrate();
+
+const component = hydrate(() => import('~/components/MyComponent.vue'));
+```
diff --git a/docs/src/guide/usage.md b/docs/src/guide/usage.md
index 4c002c3f4f..7ba35aff4c 100644
--- a/docs/src/guide/usage.md
+++ b/docs/src/guide/usage.md
@@ -42,12 +42,14 @@ Until now, components were imported either statically (`import component from '@
 
 In the background, the module [`vue3-lazy-hydration`](https://github.com/freddy38510/vue3-lazy-hydration) inspired by `vue-lazy-hydration` from [Markus Oberlehner](https://github.com/maoberlehner/vue-lazy-hydration) is used in a standardised way.
 
+[Learn more about `useBoosterHydrate`](/composables/useBoosterHydrate).
+
 ````js
-import boosterHydrate from '#booster/hydrate';
+const hydrate = useBoosterHydrate();
 
 export default {
   components: {
-    Stage: boosterHydrate(() => import('@/components/organisms/Stage')),
+    Stage: hydrate(() => import('@/components/organisms/Stage')),
   }
 };
 ````
@@ -55,7 +57,7 @@ export default {
 Whether a component is in the viewport or not is determined in the background by the intersection observer. If the initialisation is to take place earlier, e.g. when scrolling, this can be adjusted accordingly via the `rootMargin` option in the [nuxt.config](/guide/options#lazyoffset).
 
 ::: warning
-Although the <code>#booster/hydrate</code> function can be used in any component, we recommend its explicit use only in pages and layout. Its use within components can be useful only in explicit special cases.  Here we recommend the general use of static imports.
+Although the `useBoosterHydrate` composable can be used in any component, we recommend its explicit use only in pages and layout. Its use within components can be useful only in explicit special cases.  Here we recommend the general use of static imports.
 :::
 
 ::: info
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index 42a4f8db9a..eafb84f474 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -11,13 +11,14 @@
 
 <script setup>
 import 'wicg-inert';
-import boosterHydrate from '#booster/hydrate';
+import { useBoosterHydrate } from '#imports';
+const hydrate = useBoosterHydrate();
 
 const InfoLayer = defineAsyncComponent(() => import('@/components/InfoLayer'));
-const GithubCorner = boosterHydrate(
+const GithubCorner = hydrate(
   () => import('@/components/elements/GithubCorner')
 );
-const PageHeader = boosterHydrate(() => import('@/components/PageHeader'));
+const PageHeader = hydrate(() => import('@/components/PageHeader'));
 
 const route = useRoute();
 
diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js
index 573f30f017..b6be340c1d 100644
--- a/playground/nuxt.config.js
+++ b/playground/nuxt.config.js
@@ -16,6 +16,7 @@ export default defineNuxtConfig(async () => {
   const { repository } = await readPackage();
 
   return {
+    compatibilityDate: '2024-08-01',
     dev: isDev,
 
     builder: getBuilder(),
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 599139c6d2..b16e76ed46 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -13,22 +13,17 @@
 </template>
 
 <script setup>
-import boosterHydrate from '#booster/hydrate';
+import { useBoosterHydrate } from '#imports';
+const hydrate = useBoosterHydrate();
 
-const ModuleStage = boosterHydrate(() => import('@/components/modules/Stage'));
-const ModuleTextA = boosterHydrate(
-  () => import('@/components/modules/TextFontA')
-);
-const ModuleImageText = boosterHydrate(
-  () => import('@/components/modules/ImageText')
-);
-const ModuleTextB = boosterHydrate(
-  () => import('@/components/modules/TextFontB')
-);
-const ModuleVideoYoutube = boosterHydrate(
+const ModuleStage = hydrate(() => import('@/components/modules/Stage'));
+const ModuleTextA = hydrate(() => import('@/components/modules/TextFontA'));
+const ModuleImageText = hydrate(() => import('@/components/modules/ImageText'));
+const ModuleTextB = hydrate(() => import('@/components/modules/TextFontB'));
+const ModuleVideoYoutube = hydrate(
   () => import('@/components/modules/VideoYoutube')
 );
-const ModuleVideoVimeo = boosterHydrate(
+const ModuleVideoVimeo = hydrate(
   () => import('@/components/modules/VideoVimeo')
 );
 
diff --git a/playground/pages/tests/booster-layer/index.vue b/playground/pages/tests/booster-layer/index.vue
index d7ec9356e1..21a04420cc 100644
--- a/playground/pages/tests/booster-layer/index.vue
+++ b/playground/pages/tests/booster-layer/index.vue
@@ -6,14 +6,16 @@
 </template>
 
 <script setup>
-import boosterHydrate from '#booster/hydrate';
 import BoosterLayer from '#booster/components/BoosterLayer';
+import { useBoosterHydrate } from '#imports';
+
+const hydrate = useBoosterHydrate();
 
 const ready = ref(false);
 
 onMounted(() => (ready.value = true));
 
-const ComponentImageText = boosterHydrate(
+const ComponentImageText = hydrate(
   () => import('@/components/modules/ImageText')
 );
 
diff --git a/playground/pages/tests/booster-loader/index.vue b/playground/pages/tests/booster-loader/index.vue
index 4f571861f7..b70d98fa32 100644
--- a/playground/pages/tests/booster-loader/index.vue
+++ b/playground/pages/tests/booster-loader/index.vue
@@ -6,10 +6,12 @@
 </template>
 
 <script setup>
-import boosterHydrate from '#booster/hydrate';
+import { useBoosterHydrate } from '#imports';
 
-const Critical = boosterHydrate(() => import('./components/Critical'));
-const Lazy = boosterHydrate(() => import('./components/Lazy'));
+const hydrate = useBoosterHydrate();
+
+const Critical = hydrate(() => import('./components/Critical'));
+const Lazy = hydrate(() => import('./components/Lazy'));
 
 definePageMeta({
   layout: 'blank'
diff --git a/playground/pages/tests/vimeo/index.vue b/playground/pages/tests/vimeo/index.vue
index daf2d59c97..25116439b5 100644
--- a/playground/pages/tests/vimeo/index.vue
+++ b/playground/pages/tests/vimeo/index.vue
@@ -11,8 +11,11 @@
 </template>
 
 <script setup>
-import boosterHydrate from '#booster/hydrate';
-const Default = boosterHydrate(() => import('./components/Default'));
+import { useBoosterHydrate } from '#imports';
+
+const hydrate = useBoosterHydrate();
+
+const Default = hydrate(() => import('./components/Default'));
 const items = [
   {
     vimeoUrl: 'https://vimeo.com/288344114',
diff --git a/playground/pages/tests/youtube/index.vue b/playground/pages/tests/youtube/index.vue
index d93641ff85..c8a2eeab2b 100644
--- a/playground/pages/tests/youtube/index.vue
+++ b/playground/pages/tests/youtube/index.vue
@@ -11,8 +11,11 @@
 </template>
 
 <script setup>
-import boosterHydrate from '#booster/hydrate';
-const Default = boosterHydrate(() => import('./components/Default'));
+import { useBoosterHydrate } from '#imports';
+
+const hydrate = useBoosterHydrate();
+
+const Default = hydrate(() => import('./components/Default'));
 const items = [
   {
     youtubeUrl: 'https://www.youtube.com/watch?v=cLKvbhfVBUU',
diff --git a/src/runtime/composables/useBoosterHydrate.js b/src/runtime/composables/useBoosterHydrate.js
new file mode 100644
index 0000000000..11424dd6bc
--- /dev/null
+++ b/src/runtime/composables/useBoosterHydrate.js
@@ -0,0 +1,23 @@
+import { hydrateWhenVisible } from 'vue3-lazy-hydration';
+import { defineAsyncComponent, useRuntimeConfig } from '#imports';
+
+export default function () {
+  return hydrate;
+}
+
+const isDev = process.env.NODE_ENV === 'development';
+
+export const hydrate = component => {
+  const runtimeConfig = useRuntimeConfig();
+
+  return hydrateWhenVisible(wrapComponent(component), {
+    rootMargin: runtimeConfig.public.booster.lazyOffsetComponent || '0%'
+  });
+};
+
+const wrapComponent = component => {
+  if (!(isDev || import.meta.server) && typeof component === 'function') {
+    return defineAsyncComponent(component);
+  }
+  return component;
+};
diff --git a/src/runtime/hydrate.js b/src/runtime/hydrate.js
index d0b72e9a8e..beea58e80e 100644
--- a/src/runtime/hydrate.js
+++ b/src/runtime/hydrate.js
@@ -1,19 +1,10 @@
-import { hydrateWhenVisible } from 'vue3-lazy-hydration';
-import { defineAsyncComponent, useRuntimeConfig } from '#imports';
-
-const isDev = process.env.NODE_ENV === 'development';
-
-export default component => {
-  const runtimeConfig = useRuntimeConfig();
-
-  return hydrateWhenVisible(wrapComponent(component), {
-    rootMargin: runtimeConfig.public.booster.lazyOffsetComponent || '0%'
-  });
-};
-
-const wrapComponent = component => {
-  if (!(isDev || import.meta.server) && typeof component === 'function') {
-    return defineAsyncComponent(component);
-  }
-  return component;
-};
+import { hydrate } from './composables/useBoosterHydrate';
+import { obsolete } from './utils/deprecation';
+
+/**
+ * @deprecated Import `#booster/hydrate` has been deprecated, please use the new composable `useBoosterHydrate` instead!
+ */
+export default obsolete(
+  hydrate,
+  'WARNING! Obsolete import called. Import `#booster/hydrate` has been deprecated, please use the new composable `useBoosterHydrate` instead!'
+);
diff --git a/src/runtime/utils/deprecation.js b/src/runtime/utils/deprecation.js
new file mode 100644
index 0000000000..6945d1f471
--- /dev/null
+++ b/src/runtime/utils/deprecation.js
@@ -0,0 +1,9 @@
+export default function obsolete(newFunction, message) {
+  const wrapper = (...args) => {
+    console.warn(message);
+    return newFunction.apply(this, args);
+  };
+  wrapper.prototype = newFunction.prototype;
+
+  return wrapper;
+}
diff --git a/src/tmpl/plugin.tmpl.js b/src/tmpl/plugin.tmpl.js
index eb7f15778a..d2c1a084a9 100644
--- a/src/tmpl/plugin.tmpl.js
+++ b/src/tmpl/plugin.tmpl.js
@@ -1,9 +1,8 @@
 export default options => {
-  let code = `import { defineNuxtPlugin } from '#imports';
+  let code = `import { defineNuxtPlugin, useBoosterHydrate } from '#imports';
 import vFont from '#booster/directives/vFont';
 import { isSupportedBrowser } from '#booster/utils/browser';
 import FontList from '#booster/classes/FontList';
-import hydrate from '#booster/hydrate';
 import { useNuxtApp, useBoosterHead, useRequestHeaders, useRequestURL, useRequestFetch } from '#imports';
 import './fonts.css';
 
@@ -12,6 +11,8 @@ export default defineNuxtPlugin({
   enforce: 'post',
   async setup(nuxtApp) {
 
+    const hydrate = useBoosterHydrate();
+
     const fontConfig = await import('./fontConfig').then(
       module => module.default || module
     );