`ComponentCustomProperties` in `vue` module not recognized

[lzurbriggen]

the vue documentation recommends declaring custom component properties in the vue module, like this:

declare module 'vue' {
  interface ComponentCustomProperties {
    $gettext: MyType
  }
}

however the language server reports usages in templates as errors (Property '$gettext' does not exist on type '{ $: ComponentInternalInstance; ...).

declaring them in @vue/runtime-core still works, and is the way e.g. vue-router does it:

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
     $gettext: MyType
  }
}

i know the vue language tools readme mentions @vue/runtime-core regarding global components, but there's not really any other documentation regarding this, so i'd rather follow the vue docs.

i think this broke with the latest release.

versions:

• vue language features/vue-tsc: 1.8.4
• vue: 3.3.4
• typescript: 5.1.6

[so1ve]

3107 Weird...

[watchingfun]

I'm having the same problem, it's weird, is the documentation wrong or is this a pending bug, https://cn.vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

[watchingfun]

I'm having the same problem, it's weird, is the documentation wrong or is this a pending bug, https://cn.vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

It is normal to use declare module 'vue' in vscode, and it is normal to change it to declare module '@vue/runtime-core' in webstrom.

[johnsoncodehk]

Close since this problem has nothing to do with language tools, please ask the TS question in the Vue Discord server.

[saifahn]

Sorry, I haven't looked into this in detail yet, but could it have something to do with vue-tsc using @vue/runtime-core instead of vue?

[GurovDmitriy]

I also get the same error when running type checking until you replace vue with @vue/runtime-core in the declaration

https://github.com/GurovDmitriy/be-boilerplate-stack in vue-playground template find declare $mq: PluginBreakpoints

[cristianTalero]

1. you have to install it: pnpm add -D @vue/runtime-core

2. In the .d.ts file import the interface: import { ComponentCustomProperties } from '@vue/runtime-core'

3. Add the declaration: declare module "@vue/runtime-core" { interface ComponentCustomProperties { route: typeof ziggyRoute; } }

4. If it necessary and you use vscode, reload the TS Server and reload window with Ctrl+Shift+P

[so1ve]

You don't have to install it, nor import { ComponentCustomProperties } from '@vue/runtime-core'

[cristianTalero]

Yeah, but in my case only the instalation, the import was necesary, because when I remove it, I get the linter error again, I'm not sure why