Vue.extend doesn't work

[dxvladislavvolkov]

Version

3.0.0-alpha.1

Reproduction link

https://github.com/dxvladislavvolkov/vue_3_bug

Steps to reproduce

1. clone repo
2. run npm i
3. run npm run dev

I try to use this code:
import Vue from "vue";
.....

const BaseComponent: VueConstructor<IBaseComponent> = Vue.extend({

    inheritAttrs: false,

    data() {
        .....
    },

and get an error "TypeError: Vue.extend is not a function"

What is expected?

I expect the function to work

What is actually happening?

I get the error "TypeError: Vue.extend is not a function"

[yyx990803]

3.0 doesn't have Vue.extend anymore. The lib you are using likely won't work with Vue 3 at this point.

[dxvladislavvolkov]

@yyx990803 is it completely removed? or is it possible to use this method?

[yyx990803]

It is removed. For TypeScript, use defineComponent.

[backbone87]

shouldnt this be documented here https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md ?

[yyx990803]

Yes - PR welcome!

[milewski]

It was removed fine, but it did more than just provided typing no? for example I could extend 2 vue objects by doing this before:

import App from 'app.vue'

export default App.extend({
    data(){
   ...     
   }
})

or 

export default {
  extends: App 
}

Both of these seem to have been removed.. is there any alternative to keep the same behavior?

[seanlandsman]

@milewski did you find an alternative to Vue.extend ?

[backbone87]

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md#global-api-mapping

should work:

export default defineComponent({ extends: defineComponent({ ... }) });

[seanlandsman]

@backbone87 thanks, but that still doesn't achieve was Vue.extend used to provide - defineComponent doesn't in itself do anything but provide typescript support for IDEs etc (as per the docs).

What I currently use Vue.extend for is to dynamically create Vue components and then instantiate them - defineComponent won't unfortunately provide the same functionality

Edit: your suggestion however has allowed me to tidy up related code, so thanks!

[LinusBorg]

1. Define the component
2. Mount it with createApp

Does that do what you need?

[seanlandsman]

@LinusBorg I've literally just implemented that :-)

componentDefinition = defineComponent({ extends: defineComponent({ ...component }), data: () => ({params: params}), created: function() { componentInstance = this.$root }});

createApp(componentDefinition).mount(container);

This works well (with a few additions) thankfully.

The part I was struggling with was the createApp part to actually create/mount the component - I took a chance and sure enough it worked.

Thanks very much for the suggestion though!

[swaprenge]

@LinusBorg I've literally just implemented that :-)

componentDefinition = defineComponent({ extends: defineComponent({ ...component }), data: () => ({params: params}), created: function() { componentInstance = this.$root }});

createApp(componentDefinition).mount(container);

This works well (with a few additions) thankfully.

The part I was struggling with was the createApp part to actually create/mount the component - I took a chance and sure enough it worked.

Thanks very much for the suggestion though!

Hey, can you please tell me the way to pass props to this component definition?