Vue-loader: Directives are not passed down to functional components with a template

Created on 20 Nov 2018 · 15Comments · Source: vuejs/vue-loader

Version

15.4.0

Reproduction link

https://codesandbox.io/s/7yxprmx12j

Steps to reproduce

A component with <template functional>
A parent component including the previous component with v-show="false" directive

What is expected?

Expected to hide the child component

What is actually happening?

The child component is still shown, no CSS style added on the component

I'm posting on vue-loader specifically because of this issue: https://github.com/vuejs/vue/issues/8261

Thanks for your work :)

Sidenote: a raw tag in a field of this bug report page (<xxx>), without using backquotes, breaks the preview.

Source

rndmerle

👍16 👀2

Most helpful comment

This bug is almost a year old and there's not even an official comment.

It requires me to write simple things

<ListItem>
    <SomeComponent #icon />
    <OtherComponent #head />
    <ThirdComponent #footer />
</ListItem>

totally bloated

<ListItem>
    <template #icon>
        <SomeComponent />
    </template>
    <template #head>
        <OtherComponent />
    </template>
    <template #footer>
        <ThirdComponent />
    </template>
</ListItem>

Because otherwise if in the future someone will rewrite SomeComponent, OtherComponent or ThirdComponent into a functional component, he will inevitably break this code. Without even knowing.

Also i can't add tooltips and other stuff that builds on top of directives to functional components 🤦‍♂
Could at least some core member please comment on this.
Is it just not going to happen?
Is it possible but i'd have to write a PR?
Is there some kind of bigger issue to this?

econic on 2 Oct 2019

👍8

All 15 comments

posted the same on vue forum a while back.
Never got any answer...

undefinederror on 23 Nov 2018

If you need to pass directives, you will have to write the functional component with a render function for the moment

posva on 21 Dec 2018

This became a substantial problem with the newly introduced v-slot:foo / #foo syntax:

As component authors tend to rewrite their components with api compliancy, it is now impossible to rewrite a normal component as a functional SFC without breaking all usages of this component that have the new slot syntax assigned - which the component author can not control.

econic on 4 Apr 2019

Just ran into the same issue ...

arantes555 on 7 Aug 2019

@arantes555 Me too right now...

kieryk123 on 7 Aug 2019

I have the same issue. It seems like a big issue if you have a big app...

emilianodelvalle on 3 Sep 2019

👍3

This bug is almost a year old and there's not even an official comment.

It requires me to write simple things

<ListItem>
    <SomeComponent #icon />
    <OtherComponent #head />
    <ThirdComponent #footer />
</ListItem>

totally bloated

<ListItem>
    <template #icon>
        <SomeComponent />
    </template>
    <template #head>
        <OtherComponent />
    </template>
    <template #footer>
        <ThirdComponent />
    </template>
</ListItem>

Because otherwise if in the future someone will rewrite SomeComponent, OtherComponent or ThirdComponent into a functional component, he will inevitably break this code. Without even knowing.

econic on 2 Oct 2019

👍8

Same problem 👎🏻

ozq on 16 Dec 2019

Workaround: use v-if instead of v-show.

atilacamurca on 2 Mar 2020

👎1

Workaround: use v-if instead of v-show.

How is that meant to apply directives to functional components?

econic on 2 Mar 2020

@econic the original report in this issue says :

A component with