Subscribe on changes!

<component :is > fails to render component that extends a runtime template component

avatar
Jul 11th 2022

Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ksuhdx?file=src/components/HelloWorld.vue

Steps to reproduce

  1. Run the app
  2. Notice that nothing is rendered.
  3. Comment out HelloWorld.vue line 13 and uncomment HelloWorld.vue line 14.
  4. Notice that "I'm an SFC" now renders.

What is expected?

I have created a component extendedComponent that has the key extends to extend a compnent that uses a runtime template:

const baseComponentRuntimeTemplate = {
  template: `<p>I'm a component</p>`,
};

const extendedComponent = {
  extends: baseComponentRuntimeTemplate
};

And I am trying to render it with <component :is="extendedComponent"></component>.

I expected that this would render baseComponentRuntimeTemplate's template in the app.

What is actually happening?

Nothing renders.

System Info

No response

Any additional comments?

It seems to work fine when the base component is an SFC, but if the base component uses a runtime template, it does not work.

I created the reproduction link on StackBlitz because I needed to enable runtime compilation of templates.

avatar
Jul 11th 2022

BTW, you should markRaw for component.

export default {
  data() {
    return {
      component: markRaw(extendedComponent),
    };
  },
};