Auto-import seems to be not working inside functional components

[panstromek]

Describe the bug
When I use quasar component inside functional component, using auto-import feature, I get

Unknown custom element: <q-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

To Reproduce

1. Start new project
2. Create functional component inside it

<template functional>
  <div>
    <q-icon name="warning" />
  </div>
</template>
<script>
export default {
  name: 'FunctionalComponent'
}
</script>

3. Use it on some page

[huy-tran]

https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework

Did you try to have "framework": { "all": "auto" } in quasar.conf.js file ?

[nothingismagick]

I'm seeing similar in components from app extensions. Even if I manually add them to the boot-file in the index.js rigger, when combined with auto in the consuming quasar.conf.js, they are not hooked. It would probably make sense to merge auto with whatever is manually configured. @webnoob

[ejez]

Quasar auto-import loader automatically adds the detected components in the components option of the component defined in a vue file, for the example given above, the following is automatically added:

import {QIcon} from 'quasar'
component.options.components = Object.assign({QIcon}, component.options.components || {})

Functional components however do not accept the components option, thus the following code added by quasar auto-import loader gets disregarded by Vue:

component.options.components = ...

We can't declare (locally register) vue components inside a functional component, this is by design. Why functional components do not accept components option? because they are simplified for performance and do not accept all the options normal (stateful) components do.
See: vuejs/vue#8287 (comment) (point n 4)

To be able to use a vue component inside a functional component you need to register it globally (not recommended) or use a workaround like: vuejs/vue#7492 (comment)

Now for the auto import feature, the auto-import loader can be modified to detect a functional component, and instead of adding component.options.components = Object.assign({QIcon}, component.options.components || {}) , it adds the global registration Vue.component("q-icon", QIcon), but I think it is not worth it especially with the upcoming Vue 3 (see link above)

In any case this is a bug, and quasar should not add extra code that gets disregarded (assigning to components option in a functional component)

[rstoenescu]

Thank you for the write-up @ejez ! It's 100% accurate.