core: Vue.extend doesn't work

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”

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 2
  • Comments: 23 (4 by maintainers)

Most upvoted comments

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

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?

@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!

  1. Define the component
  2. Mount it with createApp

Does that do what you need?

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

should work:

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

Yes - PR welcome!