"useBoosterHydrate" is not defined

[tlkiong]

Describe the bug
A clear and concise description of what the bug is.

Using

• nuxt 3.12.4
• nuxt booster: 3.1.6

In nuxt.config.ts

modules: [
  ...,
  'nuxt-booster',
],
booster: {
  detection: {
    performance: true,
    browserSupport: true,
  },

  performanceMetrics: {
    device: {
      hardwareConcurrency: { min: 2, max: 48 },
      deviceMemory: { min: 2 },
    },
    timing: {
      fcp: 800,
      dcl: 1200,
    },
  },

  componentAutoImport: false,
  componentPrefix: undefined,

  /**
   * IntersectionObserver rootMargin for Compoennts and Assets
   */
  lazyOffset: {
    component: '0%',
    asset: '0%',
  },
},

In a "pages" file:

const hydrate = useBoosterHydrate()

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOs
• Browser chrome
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[ThornWalli]

Hello @tlkiong,

that's strange, have you tried importing the composable directly from the #imports?

import { useBoosterHydrate } from '#imports';
const hydrate = useBoosterHydrate();

And have you generally disabled auto-imports in nuxt?

nuxt.config.js

{
    imports: {
      autoImport: false
    },
}