declare module '@vue/runtime-core' break the whole app

[yaquawa]

Version

5.0.0-beta.1

Reproduction link

https://github.com/yaquawa/vuetest

Steps to reproduce

Add the following to src/shims-vue.d.ts

declare module '@vue/runtime-core' {
  interface ComponentCustomOptions {
    layout?: string
    breadcrumb?: number
  }
}

then you'll get this:

---

I just want to add some custom options for all my components, not sure why this is happening.

If I add the above declare module... to a file of a npm package, for example node_modules/vue-router-layout/lib/index.d.ts, that works..

[LinusBorg]

You need to import the interface before overwriting it.

Without that, the declaration overrides the whole runtime-core package's types.

[LinusBorg]

import { ComponentCustomOptions } from '@vue/runtime-core'

declare module '@vue/runtime-core' {
  interface ComponentCustomOptions {
    layout?: string
    breadcrumb?: number
  }
}

[yaquawa]

@LeBenLeBen This time, I got something different errors.

[LinusBorg]

you might have to move the import into the declare block like in the other one

[LinusBorg]

Oh, or I think you just have to export the interface:

declare module '@vue/runtime-core' {
  export interface ComponentCustomOptions {
    layout?: string
    breadcrumb?: number
  }
}

TBH type augmentation in declaration files still confuse me all the time.

What works better for me is to put these augmentations in a normal *.ts file. See how vue-router-next does it here:

https://github.com/vuejs/vue-router-next/blob/master/src/globalExtensions.ts

[yaquawa]

@LinusBorg Put it in a *.ts file works for me, thanks a lot !!