How to extend a component in Vue 3?

Question

The import is working just fine in case I try to use the component from element-plus directly.

What I'm trying to do though, is to extend a component from element-plus library (it uses the composition api from Vue 3) and add some additional properties to my component and methods.

In Vue 2 it would look something like this:

export default {
  extends: SomeComponent
}

In Vue 3 this seems to not be working anymore.

I've read about defineComponent but so far, without success implementing it.

Can someone shed me some lights? Thanks.

I want to extend an ElementPlus component and then use my component which will have some additional stuff — pmpc
– pmpc, Commented Mar 3, 2022 at 8:16
Hi @pmpc did you find a way for this issue ? I am also having the same problem now. how can we extend 'El Tree' component in custom component ? — SandyKrish
– SandyKrish, Commented Aug 24, 2022 at 2:54

pmpc · Accepted Answer · 2022-08-25 09:21:42Z

8

In order to extend a component that uses Composition API whereas another still uses Options API, we need to also do the setup, such as:

export default { extends: SomeComponent, setup: SomeComponent.setup }

edited Aug 25, 2022 at 9:21

answered Mar 3, 2022 at 11:50

pmpc

5139 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

michaelolof Over a year ago

This worked in Nuxt 3. Thanks

Collectives™ on Stack Overflow

How to extend a component in Vue 3?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related