Skip to content

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

Closed
@emccorson

Description

@emccorson

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.

Activity

edison1105

edison1105 commented on Jul 11, 2022

@edison1105
Member

BTW, you should markRaw for component.

export default {
  data() {
    return {
      component: markRaw(extendedComponent),
    };
  },
};
added
🐞 bugSomething isn't working
❗ p4-importantPriority 4: this fixes bugs that violate documented behavior, or significantly improves perf.
on Jul 11, 2022
added a commit that references this issue on Aug 31, 2022
9875ecd
added a commit that references this issue on Feb 4, 2023
96af1db
locked and limited conversation to collaborators on Sep 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    ❗ p4-importantPriority 4: this fixes bugs that violate documented behavior, or significantly improves perf.🐞 bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @edison1105@emccorson

      Issue actions

        <component :is > fails to render component that extends a runtime template component · Issue #6249 · vuejs/core