Build component library for plain Vue projects with Quasar

[jigarzon]

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:

//vue.config.js
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) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      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!

[s.molinari]

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

https://quasar.dev/start/vue-cli-plugin

Scott