BUG | `useMagicKeys` | TypeScript error in Nuxt

[davidabou]

Describe the bug

When using useMagicKeys() together with whenever() inside a Nuxt project (with auto-imports enabled), TypeScript reports an error even though the example comes directly from the VueUse documentation:

const keys = useMagicKeys()

whenever(keys.shift_space, () => {
  console.log('Shift+Space have been pressed')
})

Error message:

Argument of type 'ComputedRef<boolean> | undefined' is not assignable to parameter of type 'WatchSource<boolean | null | undefined>'.
  Type 'undefined' is not assignable to type 'WatchSource<boolean | null | undefined>'.ts(2345)

Expected behavior

This should not have any TypeScript error, as it matches the example shown in the official VueUse documentation for useMagicKeys.

Reproduction

https://stackblitz.com/edit/nuxt-starter-7qqmncwa?file=app%2Fapp.vue

System Info

- Operating System: `Windows_NT`
- Node Version:     `v22.19.0`
- Nuxt Version:     `4.1.2`
- CLI Version:      `3.28.0`
- Nitro Version:    `2.12.6`
- Package Manager:  `pnpm@10.18.2`
- Builder:          `-`
- User Config:      `compatibilityDate`, `devtools`, `css`, `vite`, `modules`, `fonts`, `icon`
- Runtime Modules:  `@nuxt/fonts@0.11.4`, `@nuxt/icon@2.0.0`, `@nuxt/image@1.11.0`, `@vueuse/nuxt@13.9.0`, `reka-ui/nuxt@2.5.1`
- Build Modules:    `-`

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[davidabou]

In the doc keys.shift_space is typed as ComputedRef<boolean> but in real conditions it is typed as ComputedRef<boolean> | undefined

[9romise]

This is because Nuxt enables noUncheckedIndexedAccess in tsconfig.app.json defaultly.
See https://github.com/nuxt/nuxt/blob/39dd9b60de4493f743293aaaf64c8105b0576fab/packages/kit/src/template.ts#L359

[OrbisK]

@9romise damn, you are too fast. I was preparing a playground to demonstrate 😅 https://stackblitz.com/edit/github-kwrvkjui?file=app%2Fapp.vue

[davidabou]

So I must add this to my nuxt.config.ts ?

typescript: {
  tsConfig: {
    compilerOptions: {
      noUncheckedIndexedAccess: false
    }
  }
}

[OrbisK]

I would recommend this

whenever(()=>keys.shift_space, () => {
  console.log('Shift+Space have been pressed');
});

The problem is that you cant have a potential undefined here:

whenever(undefined, () => {
  console.log('Shift+Space have been pressed');
});

but you can have

whenever(()=>undefined, () => {
  console.log('Shift+Space have been pressed');
});