5

I have a component

const DialogMain = Vue.extend(DialogComponent);

export const alertDialog = (text: string) => {
  const dialog = new DialogMain({
    propsData: {
      type: 'alert'    
    },
  });

  return new Promise(resolve => {
    // resolve reject handle here
    }
  });

So when I migrate the app to Vue3 I get 'extend' does not exist on type 'typeof import('....') error. I know since the global Vue is no longer a new-able constructor, Vue.extend no longer makes sense in terms of constructor extension. But I am not sure how to write it with defineComponent. Is it should be like

const dialogMain = defineComponent({extends: DialogComponent})

Will it be same as Vue.extend?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
mr_nocoding
  • 472
  • 7
  • 16
  • A related question https://stackoverflow.com/questions/69732406/how-to-programmatically-create-a-component-instance-in-vue-3/69734085#69734085 . This may be a bad practice to detach Vue instance from the app without a reason. For screen components there are teleports. You can mount it once within root component and control its visibility across the app. – Estus Flask Nov 01 '21 at 11:11

1 Answers1

0

Have you tried to just use the component options as is?

const DialogMain = defineComponent(DialogComponent)
Steven Spungin
  • 27,002
  • 5
  • 88
  • 78