quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.73k stars 3.49k forks source link

`framework: { all: 'auto' } ` isn't registering quasar components when I use them within a third party Vue Component. #6743

Closed fergusmeiklejohn closed 4 years ago

fergusmeiklejohn commented 4 years ago

Describe the bug framework: { all: 'auto' } isn't registering quasar components when I use them within a third party Vue Component. I'm using Vue Social Sharing: https://www.npmjs.com/package/vue-social-sharing You use it this:

import * as SocialSharing from 'vue-social-sharing'
Vue.use(SocialSharing)

The way it works, I have to create buttons inside of the component:

<vue-social-sharing>
...
<q-btn/>
<q-btn/>

etc
</vue-social-sharing>

I get an error in the console and no buttons. Switching to framework: {all: true} solves the problem. And framework: {all: 'auto'}, components: ['QBtn'] also solves the problem.

Maybe if we can't solve this problem, perhaps we should make it clearer in the Docs that all: 'auto' won't work with external Vue components and advise users to keep using auto but also add the quasar components they need to use within this special component to the components: [] array?

Console error: vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <q-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

rstoenescu commented 4 years ago

Hi,

  1. The component is <social-sharing>, not <vue-social-sharing> -- by reading their docs and code.
  2. The component has no render() function so it shouldn't work at all in the first place. (!!!)
  3. It should be import SocialSharing from 'vue-social-sharing' then Vue.use(SocialSharing) -- in a boot file.
  4. It doesn't matter if the component is third party or not. The auto import algorithm is the same and it works, guaranteed, as long as you're using Quasar components in a .vue file.