Skip to content

Stub's slots not rendering when using mixed slot syntax with shallowMount #1552

Open
@kailniris

Description

@kailniris

Version

1.0.3

Reproduction link

https://codesandbox.io/s/vue-template-xyodj

Steps to reproduce

Shallow mount a component which root component has multiple slots and different slot syntax is used for them.

What is expected?

Properly renders the shallow mounted component's root's slots.

What is actually happening?

Does not renders the slots contents or renders "<template></template>".


It works if you mix the v-slot: syntax with the # syntax but if you mix the slot=" " syntax with any other the rendered html will be broken. It also works properly if you don't mix the syntax.
Actually, this is a problem because I use Vuetify and some why I can only use the deprecated slot=" " syntax.
example:

<VNavigationDrawer>  
  <template slot="prepend">
    renders
  </template>

  <span>default slot content</span>
</VNavigationDrawer>

<VNavigationDrawer>  
  <template v-slot:prepend>
    does not renders
  </template>

  <span>default slot content</span>
</VNavigationDrawer>

edit:
The default slot considered as slot=" " syntax in this case so for my Vuetify example the default slot causes the issue. I edited the examples according to this.

workaround:

<VNavigationDrawer>  
  <template v-slot:prepend>
    renders
  </template>

  <template v-slot:default>
    <span>default slot content</span>
  </template>
</VNavigationDrawer>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions