Add support for functional components

[renestalder]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: macOS
• Vetur version: 0.21.0
• VS Code version: `.34.0

Problem

If functional components are defined in Single File Components, one has to access the Vue instance differently than in the case of a non functional component.

For example, $slots is going to be slots().

Vetur currently doesn't recognize if one is using functional components on a template.

Reproducible Case

1. Define a .vue component and add the functional tag to the property.
2. Add property acces e.g. props.<propertyName> or slots e.g. slots().default. The build will work and the app will work in run time. But Vetur shows an error.

Additional information:

• https://vue-loader.vuejs.org/guide/functional.html
• https://vuejs.org/v2/guide/render-function.html#Functional-Components

Similar issues

• Enhancement: show error for state objects in functional components #805

[ktsn]

FYI: <template functional> will be dropped in Vue v3.
vuejs/rfcs#27

[renestalder]

Interesting. Thanks for the link.

It's on "Request for comment" so we cannot yet be sure it will be dropped but it's a fair point to say that one should rather prepare for v3.

[ktsn]

Yeah, in any cases I'll investigate how we can support it in Vetur.

[renestalder]

@ktsn I feel like that's a shot into the dark. It now seems pretty clear that functional templates are dropped. Only functional components created via scripts will be available, with the reason that there will be no real performance difference between non functional and functional.

So, from my point view, that's not something that should be tackled at all and can be closed.

[douglasg14b]

This is very much needed IMHO, right now it just throws an error that:

Property 'props' does not exist

Which is problematic, and in the way.

At least a workaround would be workable.