Creating a Quasar UI App Extension Component Library

I started a new project which requires us to build a component library compatible with the Quasar framework. The library would be written in Vue but would need to be compatible with Quasar. Based on the documentation, we decided to create a Quasar App Extension. Overall the process was not as straight forward as I had hoped.

I’m going to walk you through this whole process so you can better understand WHY we’re making certain changes. However, if you just want to get the ball rolling jump to the end to see a summary of all changes you need to make.

Getting Started

To start we’ll create a component library app extension using the quasar CLI:

quasar create component-library --kit ui

You’ll have to answer some pretty standard questions to build out both components. Once you’re done you’ll have the following structure inside the app extension:

componet-library
     - app-extension # Installation scrips for including the library as part of a quasar project.
     - ui # The actual library
          - src
               - components # Where all your components should live
          - dev # A standalone sample app to test your work. DOES NOT GET INCLUDED IN THE LIBRARY OUTPUT

We can see Quasar automatically includes a component for us in ui > src > components > Component.js . Let’s create a new one that makes use of a quasar button so we can see everything working together:

Then we must register our component with the Vue Plugin function found in ui > src > index.js

Then we can leverage the sample app in dev to test out that our component is working. Let’s navigate to ui > dev > pages > Test1.vue and replace it with the following file:

Wow, that was so easy, right? We’re able to create our components in the library and immediately see the changes in the test pages. Play around with the MyQuasarButton.vue file and we can see the changes happen immediately in the sample app as well.

Ok so what’s the problem? Isn’t this is exactly what we were looking for?

For us, the problem was hiding behind some hand waving Quasar was doing. We saw in ui > src > index.js that we were exporting our component as part of a plugin. We didn’t check out how the sample app is using that. Let’s look into that now in ui > dev > boot > register.js

It looks simple enough, we just import the VuePlugin from something called “ui”. Ok so let’s follow the comment about quasar.conf.js. There’s a lot going on in this file, but what we care about is towards the bottom:

Specifically, take a look at line 54. Quasar is adjusting webpack so that it points the import “ui” to the relative folder path. Have you figured out the issue yet?

By default, this sample app is importing your code from its source files, not from its build files. When we run yarn build to actually build our app, the output could end up being quite different than what this sample app is seeing.

In fact, if you type “yarn build” into the component library right now, it won’t even build.

Building Vue files with Templates

First things, first let’s get the build working. The build seems to be failing on the templating files in our MyQuasarButton.vue file. If you took a look at the default component that was already there in the library, you’d see its a “.js” file with a render function rather than a .vue file with a template. For whatever reason, the Quasar CLI doesn’t include the proper Roll Up config file to support Vue files. (I’m still not quite sure why a Vue based library doesn’t support Vue files out of the box).

First, install these dependencies:

yarn add @rollup/plugin-common-js --dev
yarn add rollup-plugin-vue --dev
yarn add vue-template-compiler --dev

Then navigate to ui> build > script.javascript.js and add them to the list of plugins:

Then build again and it should succeed.

Ensuring you are testing the build output

We’re in much better shape now that our builds aren’t breaking, but we’re still importing from sources instead of builds.

A quick way to properly test this is with yarn link .

First, we type yarn link in the ui folder to see this:

Then we can navigate to ui > dev and run the suggested command:

yarn link quasar-ui-component-library

Now we can update the component imports for ui in register.js to:

Then run quasar dev and navigate to the test page again. We can see that our button is still showing up. Let’s sanity check that its the built component. Change the color of MyQuasarButton from “amber” to something else like “primary”. Click save and notice the browser doesn’t hot reload this time. Now run yarn build again in ui. Now the Sample app should be updated to the new color!

Conclusion

You should be able to continue following this pattern to include additional components in your component library. In the next article, I’ll cover adding fonts and CSS files in your component library that can be consumed by other modules.

As a side note, this workflow felt really clunky and complicated for our developers to use. I would recommend either:

1. Move the dev folder completely out of the project and track that separately
2. Or, rename dev to “sample-app” to make it more clear its purpose.

All code is available here: https://github.com/jmccormack200/QuasarUIExtension