Overview of the problem
Buefy version: [3.0.1]
Vuejs version: [3.5.18]
OS/Browser: (irrelevant)
IDE: PhpStorm 2025.2 for the screenshots
Description
The problem is best illustrated by a screenshot:
And with Buefy commented out:
Steps to reproduce
- Create a new Vue project using
npm create vue@latest, enabling TypeScript, the router and the sample code.
- Open the project in WebStorm / PHPStorm.
- In any component, you can use
$router and the IDE understands what you mean (screenshot 1).
- Now
import Buefy from "buefy" in any typescript file. You don't even need to include it anywhere.
- The IDE no longer understands
$router (screenshot 2).
Expected behavior
Screenshot 1
Actual behavior
Screenshot 2 😉
Suggested fix
I have no experience with Vue plugin development, but Buefy's vue-augmentation.js adds the global type definitions in this way:
// Augments the global property with `$buefy`.
// https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
declare module '@vue/runtime-core' {
/* @public */
interface ComponentCustomProperties {
/* Global Buefy API. */
$buefy: {
config: typeof ConfigComponent,
globalNoticeInterval?: ReturnType<typeof setTimeout>,
dialog: DialogProgrammatic,
loading: LoadingProgrammatic,
modal: ModalProgrammatic,
notification: NotificationProgrammatic,
snackbar: SnackbarProgrammatic,
toast: ToastProgrammatic
}
}
}The documentation the comment links to instead suggests doing this (which is incidentally also what vue-i18n and vue-router do):
// Augments the global property with `$buefy`.
// https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
declare module 'vue' { // <-- 'vue' instead of '@vue/runtime-core'
/* @public */
interface ComponentCustomProperties {
/* Global Buefy API. */
$buefy: {
config: typeof ConfigComponent,
globalNoticeInterval?: ReturnType<typeof setTimeout>,
dialog: DialogProgrammatic,
loading: LoadingProgrammatic,
modal: ModalProgrammatic,
notification: NotificationProgrammatic,
snackbar: SnackbarProgrammatic,
toast: ToastProgrammatic
}
}
}And indeed, when I monkey patch buefy.d.ts with that change, the issue is resolved:
I'll create a PR shortly, but I wanted to write up and raise the issue first. PR #4233
Overview of the problem
Buefy version: [3.0.1]
Vuejs version: [3.5.18]
OS/Browser: (irrelevant)
IDE: PhpStorm 2025.2 for the screenshots
Description
The problem is best illustrated by a screenshot:
And with Buefy commented out:
Steps to reproduce
npm create vue@latest, enabling TypeScript, the router and the sample code.$routerand the IDE understands what you mean (screenshot 1).import Buefy from "buefy"in any typescript file. You don't even need to include it anywhere.$router(screenshot 2).Expected behavior
Screenshot 1
Actual behavior
Screenshot 2 😉
Suggested fix
I have no experience with Vue plugin development, but Buefy's vue-augmentation.js adds the global type definitions in this way:
The documentation the comment links to instead suggests doing this (which is incidentally also what
vue-i18nandvue-routerdo):And indeed, when I monkey patch
buefy.d.tswith that change, the issue is resolved:I'll create a PR shortly, but I wanted to write up and raise the issue first.PR #4233