Cannot use Quasar components in a component library

[loicmarie]

Describe the bug When having more than one Vue application, a good practice is to put common components in an external component library. But it seems that putting Quasar components in an external library and using it in a Quasar app is not possible currently (or at least is not documented) Since refactoring components into an external lib is a very common step in dev lifecycle, I'd be surprised that Quasar would have such limitations. I labelled it as a bug, but if it is not in Quasar scope (would be surprising) it should be stated in the doc

Codepen/jsFiddle/Codesandbox (required) Cannot give a proper codepen since it is a multirepo issue

To Reproduce Steps to reproduce the behavior:

1. Create Vue lib with Quasar plugin: a. $ vue create quasar-lib-test (all default options) b. $ cd quasar-lib-test c. $ vue add quasar d. open main.js, remove all and paste the following:

   import HelloWorld from './components/HelloWorld.vue'
   export default HelloWorld

   e. in package.json, add "main": "./dist/quasar-lib-test.common.js" f. build the lib: $ vue-cli-service build --target lib --name quasar-lib-test

2. Create Quasar app : a. quasar create quasar-app-test (all default options) b. open pages/Index.vue, remove all and paste:

   
   <template>
   <q-page class="flex flex-center">
   <HelloWorld></HelloWorld>
   </q-page>
   </template>

c. run `vue add <YOUR_PATH_TO_LIB>`

**Expected behavior**
`HelloWorld` component should be used in `quasar-app-test` without error
Instead, we get the error:

Error in data(): "TypeError: Cannot read property 'screen' of undefined"

found in

--->

at src/pages/Index.vue at src/layouts/MainLayout.vue at src/App.vue ``` **Platform (please complete the following information):** OS: Ubuntu 18.04.2 LTS Node: 12.15.0 NPM: 6.13.4 Yarn: 1.22.1 Browsers: Chrome

[pdanpdan]

If you want to investigate what vue-cli-service build --target lib --name quasar-lib-test does it would help.

[loicmarie]

vue-cli-service build --target lib --name quasar-lib-test is the vue-cli way to create Vue component library as stated in the official doc.

The problem is it's not usable with Quasar components since they rely on Vue instance properties (such as $q here) that are not accessible in the external lib.

My understanding of Quasar scope might be wrong, and using vue-cli for creating the lib is probably not the way to go. I would like to know what is the Quasar way of refactoring components (that uses Quasar components) of multiple Quasar apps into a single external lib, if there is

[pdanpdan]

The normal way would be to make your component and reuse the code (like a snippet). I cannot think of a situation when (using quasar for the application) that would not be enough. Like a library of snippets.

[loicmarie]

I am sorry I don't perfectly get it I have:

• app A created with Quasar
• app B created with Quasar
• components CA / CB / ... / CZ that I want to be used by both apps A and B

Problem is: all these components use Quasar components Like you said, my components are made, and I want to reuse the code. The normal way is to create an external lib with vue-cli. But with Quasar I can't, because of the error mentioned above.

Can you detail where should I put these components, and how to import them in both apps ?

[pdanpdan]

Your components are either .js files or .vue files. You can copy them in any new project. I think you mean something and I don't get it. Can you explain why the copy/paste of the files with components is not good?

[loicmarie]

Just to be sure : you are suggesting me that, every time we make an update on a component, we should copy / paste it manually on our 15 others apps ?

We are a team of 8, sometimes working on the same components at the same time, it will result in versioning nightmare Refactoring components in a single, versionable, external lib is a key feature of Vue We were thinking about migrating, but we cannot use Quasar with such a constraint

[pdanpdan]

Now I got it :) You want to make reusable packages that you install in different application with npm/yarn from your repo.

https://quasar.dev/app-extensions/introduction

[pdanpdan]

If you need assistance for using the app extensions please come to the Discord channel (https://chat.quasar.dev/) - we have some guys that work with them often and they'll be able to help you.

[flozero]

I definitely disagree with that. You could have project that are not using quasar behind the scene.

And by building your component library you may want to use them in another vue projects that are not necessarily using quasar. so the "copy past" will not work in this case.

It's not normal that a components library uses internal elements. It should be framework agnostic