Build component library for plain Vue projects with Quasar

  • Hi, I’ve been investigating for the last weeks how to make a Vue Component Library with Quasar. My company is currently needing to make a Chat component that can be included in any Vue application, without the need of Quasar.

    I’m facing a few difficulties with Quasar styles, that are currently not being packed.

    I’ve found the following:

    • Its not possible to make this with quasar-cli, I have done it with the vue-cli and using the vue build --target lib command options to create a common js bundle
    • I had to manually include the quasar’s styles with the following:
    module.exports = {
      pluginOptions: {
        quasar: {
          treeShake: true,
      css: {extract: false},
      transpileDependencies: [/[\\\/]node_modules[\\\/]quasar[\\\/]/],
      chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
    function addStyleResource (rule) {
          patterns: [
            path.resolve(__dirname, 'node_modules/quasar/dist/quasar.styl'),

    But this last, doesn’t include all the styles, the app doesn’t look well. I mean: a few styles are actually included, but not all of them. Do I need to add additional styles?

    Thanks a lot!

  • Can’t you use Quasar as a Vue plug-in? Or is that what you mean by “without the need of Quasar”.


Log in to reply