Type definition of $loading causes conflict when using nuxt-ts

[lu40]

Overview of the problem

Buefy version: 0.7.3
Vuejs version: 2.6.8
Nuxt version: 2.4.5
OS/Browser: -

Description

When using nuxt-ts and buefy together the following error occurs:

73:18 Interface 'NuxtApp' incorrectly extends interface 'Vue'.
  Types of property '$loading' are incompatible.
    Property 'open' is missing in type 'NuxtLoading' but required in type '{ open: (params: LoadingConfig) => { close: () => any; }; }'.
    71 | }
    72 | 
  > 73 | export interface NuxtApp extends Vue {
       |                  ^
    74 |   $loading: NuxtLoading;
    75 |   isOffline: boolean;
    76 |   isOnline: boolean;

See the corresponding issue at nuxt: https://github.com/nuxt/nuxt.js/issues/4877

The proposed solution is to have a namespaced applied, like vuetify does. So I guess to have something like this.$buefy.loading.

As I wasn't able to find any workaround until now, this really makes it impossible to use buefy together with the typescript version of Nuxt. As $loading is a very generic name, I guess it's likely that this will not only conflict with Nuxt.

Steps to reproduce

1. Install nuxt-ts together with Buefy
2. See the error come up

[DonNicoJs]

While I agree 100% that namespacing is a good idea I would add for now a 'noconflict' mode that install under the name space and document this.

To then remove the mode and go only with the name space in the future to give people time to transition

Edit: node to mode

[lu40]

@DonNicoJs Yes I think that'd be great! How would you set up this "noconflict" node? As a branch in this repository? I could probably do a PR next week.

[DonNicoJs]

@lu40 I meant mode :D but yeah what I suggest is to modify this: https://github.com/buefy/buefy/blob/dev/src/utils/plugins.js#L12
to take a config parameter from the install to use the namespace.

[lu40]

@DonNicoJs Ahh, I see! :D

I'm not sure though if this can solve the type definition problem of having $loading added to the Vue instance: https://github.com/buefy/buefy/blob/dev/types/index.d.ts#L10

For now, I only see the way of setting up a branch or fork, where the type definitions are namespaced too..

[DonNicoJs]

@lu40 true that as well mmh but since all the ts users would use the name space (I think) we could change the types no?

[lu40]

@DonNicoJs This only applies for the ones who use Nuxt. Other users, using e.g. plain Vue with Typescript and Buefy won't have the namespace conflict.

[DonNicoJs]

@lu40 True, even tho I am of the opinion that the namespace should be the default.
Instead of two branch / fork what about 2 different set of types ? ( possibly auto-generated during the build ? ) One for the namespaced version and one for legacy

[axelthat]

When will the namespaced version be out btw?

[service-paradis]

@jtommy
Is this something that could be made for the next version (0.8.0) since it will already include some breaking changes?

[jtommy]

Yes, probably I'll work on it for next version

[lu40]

Awesome! Thanks :)

[afwn90cj93201nixr2e1re]

@jtommy it's too much breakable change.
Write some articles on doc's page.

[service-paradis]

@afwn90cj93201nixr2e1re
There is an entire section dedicated to breaking changes in the release notes for 0.8.0:
https://github.com/buefy/buefy/releases

[afwn90cj93201nixr2e1re]

It's on github. Not on doc's site.

doc's page

[service-paradis]

Nope, the docs is for the current release. There is a link to the changelog if needed:

[afwn90cj93201nixr2e1re]

There should be additional page, inside docs, merging from -> to.
Plain users should check it on docs page.

[jkhmnk]

试试 tsconfig.json compilerOptions参数里

"compilerOptions": {
"skipLibCheck": true
}

[jtommy]

@jkhmnk now you shouldn't need it